vue2 watch用法
时间: 2023-08-24 10:13:14 浏览: 55
Vue.js中的watch选项用于监听数据的变化,并在数据发生变化时执行相应的操作。下面是Vue2中watch的用法示例:
```javascriptwatch: {
// 监听单个数据变化 value: function(newValue, oldValue) {
// 在value发生变化时执行操作 console.log('value发生了变化', newValue, oldValue);
},
// 监听多个数据变化 'obj.prop1': {
handler: function(newValue, oldValue) {
// 在obj.prop1发生变化时执行操作 console.log('obj.prop1发生了变化', newValue, oldValue);
},
deep: true // 深度监听对象内部属性的变化 },
// 监听数组变化 'arr': {
handler: function(newValue, oldValue) {
// 在arr发生变化时执行操作 console.log('arr发生了变化', newValue, oldValue);
},
deep: true // 深度监听数组内部元素的变化 }
}
```
在上面的示例中,我们定义了三个watch选项来监听数据的变化。第一个是监听单个数据`value`的变化,当`value`发生变化时,会执行相应的操作。第二个是监听对象`obj`的`prop1`属性的变化,通过设置`deep: true`来深度监听对象内部属性的变化。第三个是监听数组`arr`的变化,同样通过设置`deep: true`来深度监听数组内部元素的变化。
当被监听的数据发生变化时,对应的handler函数会被调用,并传入新值和旧值作为参数。你可以在这个函数中执行你需要的操作,比如更新视图或触发其他逻辑。
这就是Vue2中watch的基本用法。希望能对你有所帮助!如果还有其他问题,请继续提问。