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);
    }
  }
});