在 Vue 中，watch 用于监视数据的变化并采取相应的操作。本文将详细解释 Vue 中 watch 的用法，包括基本用法和高级用法。
基本的 watch
首先，让我们了解 watch 的基本用法。假设有一个 Vue 实例，其中包含一个数据属性，需要监视这个数据属性的变化。
<template>
<div>
<p>当前计数: {{ count }}</p>
<button @click="increment">增加计数</button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0,
};
},
watch: {
count(newCount, oldCount) {
console.log(`计数从 ${oldCount} 变为 ${newCount}`);
},
},
methods: {
increment() {
this.count++;
},
},
};
</script>
在上面的示例中，创建了一个 count 数据属性，并在 watch 对象中定义了一个count属性。当count发生变化时，watch中的处理程序将被调用。这样能够在数据变化时执行自定义逻辑。
深度 watch
除了基本的 watch，Vue 还支持深度观察对象或数组的变化。这是通过设置 deep 选项为 true 来实现的。
<script>
export default {
data() {
return {
person: {
name: 'John',
age: 30,
},
};
},
watch: {
person: {
handler(newPerson, oldPerson) {
console.log('人员信息发生变化');
},
deep: true,
},
},
methods: {
updatePerson() {
this.person.name = 'Jane';
},
},
};
</script>
在这个示例中，将deep选项设置为true，这意味着当person对象内部的属性发生变化时，watch处理程序将被调用。
立即执行 watch
默认情况下，watch的处理程序在数据变化后才会被执行。但有时，可能需要在初始渲染时立即执行一次。这可以通过设置immediate选项为true来实现。
<script>
export default {
data() {
return {
message: 'Hello, Vue!',
};
},
watch: {
message: {
handler(newMessage) {
console.log(`消息已更新为: ${newMessage}`);
},
immediate: true,
},
},
created() {
// 在组件创建时，watch处理程序会立即执行
},
};
</script>
在上述示例中，immediate选项被设置为true，因此message属性在组件创建时会立即触发watch处理程序。
移除 watch
如果需要停止对数据的观察，可以使用 $watch 方法，并在组件销毁时取消观察。
<script>
export default {
data() {
return {
dataToWatch: 'I will be watched',
};
},
created() {
this.unwatch = this.$watch('dataToWatch', (newData, oldData) => {
console.log(`数据从 ${oldData} 变为 ${newData}`);
});
},
beforeDestroy() {
// 在组件销毁之前，停止观察
this.unwatch();
},
};
</script>
在上面的示例中，先使用this.$watch方法来观察dataToWatch，并将返回的取消观察函数存储在this.unwatch中。在组件销毁之前，调用this.unwatch来停止观察。
