vue3 watch 深度监听

在Vue 3中，watch选项提供了一种监听数据变化的方式。通过watch选项，你可以监视一个特定的数据属性，并在其发生变化时执行相应的操作。

深度监听是watch选项的一个特性，它允许你在监听对象或数组时进行递归的深度观察。当对象或数组中的嵌套属性发生变化时，深度监听会自动触发相应的回调函数。

要使用深度监听，你可以在watch选项中设置deep为true。例如：

watch: {
  myObject: {
    handler(newVal, oldVal) {
      // 对象发生变化时的操作
    },
    deep: true
  }
}

在上面的例子中，当myObject对象或其嵌套属性发生变化时，handler函数会被调用。注意，深度监听是递归的，它会遍历对象或数组的所有嵌套属性。

需要注意的是，深度监听可能会带来性能上的开销，因为它需要递归遍历整个对象或数组。因此，在使用深度监听时，要确保只在必要的情况下使用，并且避免监听过于复杂的数据结构。

相关问题

vue3 watch深度监听

在Vue3中，watch默认情况下只会监听对象的第一层属性，如果需要深度监听，可以通过设置`deep`选项为`true`来实现。具体实现方法如下所示：

import { watch } from 'vue'

watch(
  // 监听的对象
  () => state.obj,
  // 监听到变化后的回调函数
  (newVal, oldVal) => {
    console.log('newVal:', newVal)
    console.log('oldVal:', oldVal)
  },
  // 配置项
  {
    deep: true // 开启深度监听
  }
)

需要注意的是，当监听的对象为`Proxy`对象时，`oldValue`值将会出现异常，此时与`newValue`相同。如果需要监听`Proxy`对象的某个属性，可以通过在监听对象的回调函数中获取该属性的值来实现。另外，在Vue3中，强制开启了深度监听，无法关闭。

vue3watch深度监听

### 实现 Vue 3 中的深度监听

在 Vue 3 中，`watch` 的配置项 `deep` 能够用于创建一个深度监听器来追踪对象内部属性的变化。当目标是一个复杂的数据结构（如对象或数组），设置此选项为 `true` 将确保每当嵌套层次中的任何值发生变化时都会触发回调函数。

对于简单的响应式数据绑定而言，默认情况下 `watch` 不会深入到对象内部去检测变化；但是通过启用 `deep` 参数可以改变这一行为模式[^1]。

下面展示了一个具体的例子说明如何利用 `watch` 和 `deep` 来监视整个对象的状态更新：

import { ref, reactive, watch } from 'vue';

// 创建一个具有多级属性的对象作为响应源
const formData = reactive({
    user: {
        name: '',
        age: null,
        address: ''
    }
});

// 定义一个 watcher 对象并开启深监测功能
watch(
    () => ({ ...formData.user }), 
    (newVal, oldVal) => {
        console.log('User info changed:', newVal);
        console.log('Previous value was:', oldVal);
    },
    { deep: true }
);

// 更新某个深层字段将会激活观察者逻辑
setTimeout(() => {
    formData.user.name = "John Doe";
}, 2000);

在这个案例里，一旦 `formData.user` 下面任何一个子节点发生变动——无论是直接赋新值还是修改已有条目——所定义好的侦听程序就会被执行，并打印出最新的以及前一刻的状态给开发者查看。

值得注意的是，在处理大型应用时应当谨慎使用深度监听特性，因为它可能会带来性能上的开销。如果只需要关注特定路径下的变更，则建议采用更精确的方式指定要监控的部分而不是盲目地对整个对象树实施全面监督。