简述Vue中watch用法详解 ?
watch 是 Vue 中的一个重要特性，它可以监听 Vue 实例上数据的变化。
基本用法是在 Vue 实例的 watch 选项中定义一个对象，对象的属性对应要监听的数据，属性的值是当对应的数据变化时要执行的函数。
例如：
new Vue({
data: {
count: 0
},
watch: {
count: function (newVal, oldVal) {
console.log(`count 变更为： {newVal}，旧值为：{oldVal}`);
}
}
})
在这个例子中，每当 count 的值变化，就会打印出新旧值。
还有一些高级用法：
- 深度监听：默认情况下，
watch只能监听到数据的一级属性的变化。如果要监听到对象的所有层级的变化，可以设置deep选项为true。
new Vue({
data: {
obj: {
a: 1
}
},
watch: {
obj: {
handler: function (newVal, oldVal) {
console.log('obj 变化了');
},
deep: true
}
}
})
在这个例子中，无论 obj 的哪一级属性变化，都会触发回调函数。
- 立即执行：默认情况下，
watch的回调函数只有在数据变化时才会执行。如果要在 Vue 实例创建时就执行回调函数，可以设置immediate选项为true。
new Vue({
data: {
count: 0
},
watch: {
count: {
handler: function (newVal, oldVal) {
console.log(`count 变更为： {newVal}，旧值为：{oldVal}`);
},
immediate: true
}
}
})
在这个例子中，count 的 watch 回调函数会在 Vue 实例创建时就执行一次。