vue2 watch深度监听
时间: 2023-07-22 07:00:34 浏览: 90
vue watch深度监听对象实现数据联动效果
5星 · 资源好评率100%
Vue 2 中的 `watch` 选项默认是浅监听的,即只监听对象或数组的引用变化。如果想要实现深度监听,可以通过设置 `immediate: true` 和 `deep: true` 来实现。
```javascript
watch: {
objectToWatch: {
handler(newVal, oldVal) {
console.log('Object changed:', newVal);
},
immediate: true,
deep: true
}
}
```
在上面的示例中,`objectToWatch` 是要监听的对象,`handler` 是监听到变化时触发的回调函数。`immediate: true` 表示在组件加载时就立即执行一次回调函数,`deep: true` 表示进行深度监听。
请注意,深度监听可能会带来性能问题,因为它需要递归遍历整个对象或数组来检测变化。因此,尽量在必要的情况下使用深度监听,以避免性能影响。
阅读全文