vue3 watch 深度侦听

在 Vue 3 中，可以通过 `watch` 函数来进行深度侦听。深度侦听是指在对象或数组的嵌套属性发生变化时触发回调函数。

下面是一个示例：

import { watch } from 'vue';

watch(
  () => obj.nestedProp,
  (newValue, oldValue) => {
    // 当 obj.nestedProp 发生变化时会触发回调函数
    // newValue 是新的值，oldValue 是旧的值
  },
  { deep: true }
);

在上面的示例中，我们使用 `watch` 函数监视 `obj.nestedProp` 的变化，并在发生变化时触发回调函数。通过传递 `{ deep: true }` 选项，我们可以实现深度侦听。

需要注意的是，深度侦听会带来一些性能开销，因为 Vue 需要递归地遍历整个对象或数组。因此，建议只在需要深度侦听时才使用深度选项。

希望能帮到你！如果还有其他问题，请随时提问。

相关问题

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` 下面任何一个子节点发生变动——无论是直接赋新值还是修改已有条目——所定义好的侦听程序就会被执行，并打印出最新的以及前一刻的状态给开发者查看。

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

vue3 watch避免深度监听浪费

Vue3 中的 `watch` 可能会触发深度监听，这在处理大量数据或者嵌套对象时可能会消耗较多性能，特别是当对象的属性值发生变化时，所有依赖于该属性的 `watcher` 都会被更新。为了避免这种浪费，你可以采取以下策略：

1. **浅观察者模式** (`shallow` 或 `immediate`): 使用 `shallow` 或 `immediate` 参数可以限制 `watch` 只对直接响应式属性进行监控，而不是整个路径。这意味着只在最顶层的属性改变时触发回调。

   watch(props, handler, { shallow: true });

2. **计算属性** (Computed Properties): 如果某个属性需要基于其他属性计算得出，可以将其定义为计算属性。这样，当你只需要更新计算结果，而不关心内部结构变化时，可以更高效地跟踪。

   computed: {
     deepProperty() {
       return this.someDeepObject;
     }
   }

3. **仅监听必要的部分**: 当监听的数据结构复杂时，只关注真正需要的变化，比如通过数组的索引来跟踪变动。

4. **ref 和 reactive** 的组合: 对于深层引用，可以考虑使用 `ref` 或 `reactive` 来创建代理对象，它们默认只会监听顶级的变更。

5. **自定义侦听器** (`deep` 或 `handler` 选项): 可以提供一个自定义函数作为回调，它可以选择性地执行深拷贝或者仅检查特定的路径是否更改。

watch(obj, handler, {
  deep: false, // 根据需要选择深度监听
  handler(value) {
    if (!value.equals(oldValue)) {
      // 只有在必要时才执行操作
      handler(value);
    }
  }
});