vue2 watch 示例
时间: 2023-08-12 20:10:31 浏览: 99
vue2.0案例
当你想要在Vue2中使用`watch`来监控数据变化时,可以在组件的`watch`选项中设置一个或多个观察者。观察者可以是一个函数,也可以是一个对象。
以下是一个Vue2中使用`watch`的示例:
```javascript
// 在Vue组件中
export default {
data() {
return {
message: 'Hello',
count: 0
};
},
watch: {
message(newVal, oldVal) {
console.log(`message改变了,新值为:${newVal},旧值为:${oldVal}`);
},
count: {
handler(newVal, oldVal) {
console.log(`count改变了,新值为:${newVal},旧值为:${oldVal}`);
},
immediate: true // 设置immediate为true,会在初始化时立即执行一次handler函数
}
}
}
```
在上面的示例中,我们定义了一个`message`属性和一个`count`属性,并在`watch`选项中分别设置了对它们的观察者。
当`message`属性的值发生变化时,观察者函数会被调用,并且会传入新值和旧值作为参数。
对于`count`属性,我们使用了一个对象形式的观察者,并设置了`handler`函数来处理属性变化。设置`immediate`为`true`会在组件初始化时立即执行一次`handler`函数。
这只是一个简单的示例,你可以根据实际需求来设置更多的观察者或使用更复杂的逻辑来处理数据变化。
阅读全文