vue中watch的用法
在 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
生命周期钩子中手动使用,返回的取消函数可以停止监听:
const unwatch = this.$watch('message', (newValue, oldValue) => {
console.log('Message changed:', newValue);
});
// 停止监听
unwatch();
总结
watch
用于对数据变化做出反应。适合用于:
- 侦听复杂的逻辑变化
- 监听异步请求的结果
- 处理一些需要精确控制的数据变化响应
它与 computed
的区别在于:computed
是基于依赖进行缓存的属性,而 watch
是对数据变化的副作用处理。
原文地址:https://blog.csdn.net/xuanyuanjiaqi/article/details/142823643
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!