在 Vue.js 中，watch 是一个用于侦听和响应数据变化的选项。它常用于监听组件数据（包括 props 和 data 中的值）的变化，并在值发生变化时执行自定义逻辑。
基本用法
watch 选项接受一个对象，其中键是你想要侦听的变量，值是一个回调函数，在该变量发生变化时执行。
<template><div><p>{{ message }}</p><button @click="updateMessage">Change Message</button></div>
</template><script>
export default {data() {return {message: 'Hello, Vue!'};},methods: {updateMessage() {this.message = 'Hello, Watcher!';}},watch: {// 监听 message 变量的变化message(newValue, oldValue) {console.log('Message changed from', oldValue, 'to', newValue);}}
};
</script>
在这个例子中，watch 侦听 message 的变化，并在 message 发生变化时打印新值和旧值。
立即执行和深度监听
- 立即执行 (
immediate): 默认情况下，watch只在数据变化时触发。如果你希望在组件初始化时立即执行一次回调，可以通过immediate: true配置。
watch: {message: {handler(newValue, oldValue) {console.log('Message changed:', newValue);},immediate: true}
}
- 深度监听 (
deep): 如果你监听的是一个对象或数组，且希望监听其内部属性的变化，可以使用deep: true。
watch: {obj: {handler(newValue, oldValue) {console.log('Object changed:', newValue);},deep: true}
}
监听多个数据源
你也可以在一个 watcher 中监听多个数据源，类似于计算属性的 getter。
watch: {'person.name'(newValue) {console.log('Person name changed:', newValue);},'person.age'(newValue) {console.log('Person age changed:', newValue);}
}
侦听计算属性
watch 不仅可以侦听普通数据，还可以侦听计算属性的变化。
computed: {fullName() {return `${this.firstName} ${this.lastName}`;}
},
watch: {fullName(newValue) {console.log('Full name changed to:', newValue);}
}
停止 watch
watch 方法还可以在 created 或 mounted 生命周期钩子中手动使用，返回的取消函数可以停止监听：
javascript">const unwatch = this.$watch('message', (newValue, oldValue) => {console.log('Message changed:', newValue);
});// 停止监听
unwatch();
总结
watch 用于对数据变化做出反应。适合用于：
- 侦听复杂的逻辑变化
- 监听异步请求的结果
- 处理一些需要精确控制的数据变化响应
它与 computed 的区别在于：computed 是基于依赖进行缓存的属性，而 watch 是对数据变化的副作用处理。
