vue2 监听计算属性
时间: 2023-08-24 16:13:13 浏览: 131
vue watch关于对象内的属性监听
5星 · 资源好评率100%
在Vue2中,我们可以使用`computed`属性和`watch`函数来监听计算属性的变化。
使用`computed`属性时,我们可以通过定义一个计算属性的getter函数来获取计算属性的值。当计算属性依赖的响应式数据发生变化时,计算属性会被重新计算。例如:
```javascriptnew Vue({
data: {
count:0 },
computed: {
plusOne: function() {
return this.count +1;
}
}
});
```
在上述代码中,当`count`发生变化时,`plusOne`计算属性会重新计算并返回`count +1`的值。
另外,我们也可以使用`watch`函数来监听计算属性的变化。使用`watch`函数时,我们需要传入要监听的计算属性的名称和一个回调函数,当计算属性的值发生变化时,回调函数会被执行。例如:
```javascriptnew Vue({
data: {
count:0 },
computed: {
plusOne: function() {
return this.count +1;
}
},
watch: {
plusOne: function(newValue, oldValue) {
console.log('计算属性发生变化:', newValue, oldValue);
}
}
});
```
在上述代码中,当`plusOne`计算属性的值发生变化时,回调函数会被执行并打印出新旧值。
综上所述,Vue2中可以使用`computed`属性和`watch`函数来监听计算属性的变化。
阅读全文