vue2文档：API — Vue.js
vue3文档：侦听器 | Vue.js
watch 可以用来监听页面中的数据，但如果监听的源是对象或数组，则使用深度监听，强制深度遍历源，以便在深度变更时触发回调。
一，监听
<template>
<div>
<h1>{{ sum }}</h1>
<button @click="addSum">+1</button>
</div>
</template>
<script>
export default {
data() {
return {
sum: 18
}
},
watch: {
sum: function (newValue, oldValue) {
console.log(newValue, oldValue);
}
},
methods: {
addSum() {
this.sum = this.sum + 1
}
}
}
</script>普通用法，可以监听到sum的值。
二，深度监听
但如果要监听对象或数组里的元素，上面的方法不能使用。需要加 deep 和 handler，给对象的每一个属性添加一个监听器。
<template>
<div>
<h1>{{ data.a }}</h1>
<button @click="addA">+1</button>
</div>
</template>
<script>
export default {
data() {
return {
data: {
a: 14,
b: 16
}
}
},
watch: {
data: {
handler: function (newValue) {
console.log(newValue);
},
deep: true
}
},
methods: {
addA() {
this.data.a = this.data.a + 1
}
}
}
</script>
深度监听将 deep 改为 true，代表是否进行深度监听，默认为 false，监听会一层层向下遍历，给对象的每一个属性都添加一个监听器。
在 handler 中编写需要执行的代码。
如果只想监听其中一个属性，这种方法会造成资源的浪费，因为给对象的每一个属性都添加了监听器，一次监听会得到对象中的所有属性。
只监听对象的某一属性
可以将监听的属性用字符串的类型表示，这样只会监听对象其中的某一个属性。
<template>
<div>
<h1>{{ data.a }}</h1>
<button @click="addA">+1</button>
</div>
</template>
<script>
export default {
data() {
return {
data: {
a: 14,
b: 16
}
}
},
watch: {
'data.a': {
handler: function (newValue) {
console.log(newValue);
},
deep: true
}
},
methods: {
addA() {
this.data.a = this.data.a + 1
}
}
}
</script>