在 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
是对数据变化的副作用处理。