Vue中deep的用法

deep: true 的用法

在 Vue 中，watch 用来监听数据的变化，并执行相应的回调函数。当监听的对象是一个复杂的数据结构（如对象或数组）时，默认情况下 Vue 的 watch 只会监听顶层属性的变化，而不会监听对象内部属性的变化。

例子

假设您有如下数据结构：

data() {
  return {
    user: {
      name: 'Alice',
      age: 25,
    },
  };
},

如果想监听 user 对象的变化，但是只关心顶层属性的变化，可以这样做：

watch: {
  user: function (newValue, oldValue) {
    console.log('User object changed:', newValue, oldValue);
  },
},

这样，当 user.name 或 user.age 发生变化时，watch 回调不会被触发，因为 Vue 只监听了 user 对象本身的变化。

使用 deep: true

如果您希望监听对象内部的变化，需要将 deep 选项设置为 true。这会让 Vue 深度监听对象内部的属性变化。

示例代码

watch: {
  user: {
    handler: function (newValue, oldValue) {
      console.log('User object or its properties changed:', newValue, oldValue);
    },
    deep: true, // 重要：设置 deep 为 true 才能监控对象内部的变化
  },
},

在这个例子中，当 user.name 或 user.age 发生变化时，watch 回调会被触发。

注意事项

1. 性能影响：

   • 使用 deep: true 会增加性能开销，因为它需要递归地监测对象内部的变化。因此，仅在确实需要监听内部变化时才使用此选项。

2. 对象必须是响应式的：

   • 要确保对象及其内部属性是响应式的。如果在 Vue 实例创建之后动态添加了对象属性，需要使用 Vue.set 或 this.$set 方法来确保它是响应式的。

3. 监听器的结构：

   • 当使用 deep: true 时，需要将 handler 和 deep 作为对象的属性定义，而不是直接将函数作为 watch 的值。