vue如何实现watchdeep

Vue 中实现深度监听（deep watch）

在 Vue 中，watch 选项可以监听数据变化。默认情况下，watch 是浅层的（shallow），仅监听对象引用的变化。如果需要深度监听对象内部属性的变化，可以使用 deep 选项。

基本语法

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

示例代码

export default {
  data() {
    return {
      user: {
        name: 'Alice',
        address: {
          city: 'New York'
        }
      }
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('User data changed:', newVal)
      },
      deep: true
    }
  }
}

监听特定嵌套属性

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

watch: {
  'user.address.city'(newVal, oldVal) {
    console.log('City changed:', newVal)
  }
}

立即触发回调

如果需要立即执行一次监听回调，可以使用 immediate 选项：

watch: {
  user: {
    handler(newVal, oldVal) {
      console.log('User data changed:', newVal)
    },
    deep: true,
    immediate: true
  }
}

使用 $watch API

也可以在组件实例中通过 this.$watch 动态添加深度监听：

created() {
  this.$watch(
    'user',
    (newVal, oldVal) => {
      console.log('User data changed:', newVal)
    },
    { deep: true }
  )
}

注意事项

• 深度监听会遍历对象的所有属性，可能对性能有影响，尤其是监听大型对象时。
• 对于数组的变更（如 push、pop 等），Vue 已经进行了封装，无需深度监听也能触发更新。但直接通过索引修改数组元素时，仍需使用 Vue.set 或数组的变异方法。