watch监听函数调用
时间: 2024-01-31 08:11:11 浏览: 26
watch监听函数是Vue.js框架中的一个特性,用于监听数据的变化并执行相应的回调函数。当数据发生变化时,watch监听函数会被触发,可以用来执行一些额外的逻辑操作或者响应式地更新其他数据。
watch监听函数可以在Vue实例的选项中定义,也可以在组件中定义。它接收两个参数:第一个参数是要监听的数据,可以是一个字符串表示data中的属性名,也可以是一个函数返回要监听的数据;第二个参数是回调函数,当监听的数据发生变化时,回调函数会被调用。
下面是一个示例代码,演示了如何使用watch监听函数:
```javascript
// 在Vue实例中定义watch监听函数
new Vue({
data: {
message: 'Hello, Vue!'
},
watch: {
message(newValue, oldValue) {
console.log('message changed:', newValue, oldValue);
}
}
});
// 在组件中定义watch监听函数
Vue.component('my-component', {
data() {
return {
count: 0
};
},
watch: {
count(newValue, oldValue) {
console.log('count changed:', newValue, oldValue);
}
}
});
```
在上述代码中,当`message`属性或`count`属性发生变化时,对应的watch监听函数会被调用,并打印出新值和旧值。