vue怎么实现深度监听

Vue 深度监听实现方法

在 Vue 中，可以通过 watch 选项或 $watch 方法实现深度监听，主要用于监听对象或数组内部属性的变化。

使用 watch 选项

通过设置 deep: true 开启深度监听：

watch: {
  obj: {
    handler(newVal, oldVal) {
      // 处理变化
    },
    deep: true // 深度监听
  }
}

使用 $watch 方法

在组件实例中动态添加深度监听：

this.$watch(
  'obj',
  (newVal, oldVal) => {
    // 处理变化
  },
  { deep: true }
)

监听特定嵌套属性

如果需要监听对象中某个特定嵌套属性，可以使用点语法路径：

watch: {
  'obj.nestedProp'(newVal) {
    // 处理特定属性变化
  }
}

注意事项

• 深度监听会对对象所有属性递归监听，性能开销较大，应谨慎使用
• 数组变动不需要深度监听也能被检测到，但数组元素为对象时需要深度监听
• 对于大型复杂对象，建议使用计算属性或只监听必要路径

替代方案

考虑使用 Vue.set 或 this.$set 来确保响应式更新：

this.$set(this.obj, 'key', value)

对于需要深度监听但性能敏感的场景，可以结合 lodash 的 _.cloneDeep 进行优化。