1. vue2 使用watch 深度监听一个值
在 Vue 2 中,如果你想深度监听一个对象或数组的属性变化,你可以使用 deep 选项来实现。
这通常用于当你的响应式数据是一个复杂的数据结构(如对象或数组)时,并且你希望在这些数据结构内部发生变化时也能触发监听器。
下面是如何在 Vue 2 中设置一个深度监听的 watch 示例:
1.1. 基本用法
首先,你需要定义一个响应式的对象或数组,在 Vue 实例的 data 属性中声明它:
然后,在 watch 对象中设置一个观察器,指定 deep 为 true:
1.2. 注意事项
- 性能影响:深度监听可能会导致性能问题,因为它会递归地监听所有嵌套的属性。如果你知道只有某些特定的属性会改变,考虑只监听那些特定的属性。
- 数组变更检测:Vue.js 通过对象属性的变动来检测变化,但对数组的变更检测有一些限制。对于数组,只有使用变异方法(如 push, splice 等)才会被检测到。如果直接修改索引或长度,需要手动调用 $set 或 $delete 方法。
1.3. 示例代码
这里有一个完整的示例,展示了如何在 Vue 2 中使用深度监听:
HTML:
在这个例子中,每次点击按钮都会更新 innerValue 的值,并且由于我们启用了深度监听,所以 watch 的 handler 函数会被调用。