我们一起聊聊 Vue2 使用 Watch 深度监听一个值-51CTO.COM

1. vue2 使用watch 深度监听一个值

在 Vue 2 中，如果你想深度监听一个对象或数组的属性变化，你可以使用 deep 选项来实现。

这通常用于当你的响应式数据是一个复杂的数据结构（如对象或数组）时，并且你希望在这些数据结构内部发生变化时也能触发监听器。

下面是如何在 Vue 2 中设置一个深度监听的 watch 示例：

1.1. 基本用法

首先，你需要定义一个响应式的对象或数组，在 Vue 实例的 data 属性中声明它：

export default {
  data() {
    return {
      myObject: {
        innerValue: 0,
      },
    };
  },
};1.
2.
3.
4.
5.
6.
7.
8.
9.

然后，在 watch 对象中设置一个观察器，指定 deep 为 true：

export default {
  data() {
    return {
      myObject: {
        innerValue: 0,
      },
    };
  },
  watch: {
    myObject: {
      handler(newValue, oldValue) {
        console.log('myObject changed:', newValue, oldValue);
      },
      deep: true, // 这里启用深度监听
    },
  },
};1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.

1.2. 注意事项

性能影响：深度监听可能会导致性能问题，因为它会递归地监听所有嵌套的属性。如果你知道只有某些特定的属性会改变，考虑只监听那些特定的属性。
数组变更检测：Vue.js 通过对象属性的变动来检测变化，但对数组的变更检测有一些限制。对于数组，只有使用变异方法（如 push, splice 等）才会被检测到。如果直接修改索引或长度，需要手动调用 $set 或 $delete 方法。

1.3. 示例代码

这里有一个完整的示例，展示了如何在 Vue 2 中使用深度监听：

new Vue({
  el: '#app',
  data: {
    myObject: {
      innerValue: 0,
    },
  },
  watch: {
    myObject: {
      handler(newValue, oldValue) {
        console.log('myObject changed:', newValue, oldValue);
      },
      deep: true,
    },
  },
});1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

HTML:

<div id="app">
  <button @click="myObject.innerValue += 1">Increment</button>
  <p>Current value: {{ myObject.innerValue }}</p>
</div>1.
2.
3.
4.

在这个例子中，每次点击按钮都会更新 innerValue 的值，并且由于我们启用了深度监听，所以 watch 的 handler 函数会被调用。