Vue 3的`watchEffect`：如何处理依赖追踪？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

Vue 3 的 `watchEffect`：深入依赖追踪机制

各位，大家好！今天我们要深入探讨 Vue 3 中一个非常强大且常用的响应式 API：watchEffect。watchEffect 的核心功能是自动追踪依赖并在依赖发生变化时执行副作用函数。理解它的依赖追踪机制对于编写高效、可维护的 Vue 应用至关重要。

什么是 `watchEffect`？

watchEffect 允许我们注册一个回调函数，该函数会在其依赖项发生变化时自动重新执行。与 watch 相比，watchEffect 不需要显式指定要观察的属性或表达式，它会自动追踪在回调函数执行期间访问的所有响应式依赖项。

基本用法

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

watchEffect(() => {
  console.log(`Count is now: ${count.value}`);
});
</script>

在这个例子中，watchEffect 会自动追踪 count.value 的变化。每次点击按钮导致 count.value 更新时，控制台都会打印出新的 count 值。

依赖追踪的原理

Vue 3 的响应式系统使用基于 Proxy 的依赖追踪机制。当你在 watchEffect 的回调函数中访问一个响应式数据时，Vue 会记录这个依赖关系。让我们用一个更详细的例子来说明：

<template>
  <div>
    <p>A: {{ a }}</p>
    <p>B: {{ b }}</p>
    <button @click="update">Update</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const a = ref(1);
const b = ref(2);

const update = () => {
  a.value++;
  b.value++;
};

watchEffect(() => {
  console.log(`A: ${a.value}, B: ${b.value}`);
});
</script>

在这个例子中，watchEffect 会追踪 a.value 和 b.value 的变化。当点击按钮时，a.value 和 b.value 都会更新，导致 watchEffect 回调函数重新执行。

让我们从底层来理解这个过程：

响应式数据的定义: a 和 b 是通过 ref 创建的响应式数据。 ref 函数会创建一个包含 value 属性的对象，并使用 Proxy 对该对象进行包装。
Proxy 的作用: Proxy 拦截对 value 属性的读取和设置操作。
依赖收集: 当 watchEffect 的回调函数执行时，它会读取 a.value 和 b.value。在读取 a.value 时，Proxy 的 get 拦截器会被触发。 get 拦截器会将当前正在执行的 watchEffect 回调函数（或者更准确地说，是与 watchEffect 关联的 effect）添加到 a 的依赖列表中。同样，读取 b.value 时，也会将该 effect 添加到 b 的依赖列表中。
触发更新: 当 a.value 或 b.value 被更新时，Proxy 的 set 拦截器会被触发。 set 拦截器会遍历 a 或 b 的依赖列表，并执行列表中的所有 effect。
Effect 的执行: 执行 effect 意味着重新运行 watchEffect 的回调函数。

具体代码模拟依赖收集过程 (简化版)

虽然无法完全重现 Vue 内部的复杂实现，但我们可以创建一个简化的例子来模拟依赖收集的过程：

class Dep {
  constructor() {
    this.subscribers = new Set(); // 使用 Set 避免重复依赖
  }

  depend() {
    if (activeEffect) {
      this.subscribers.add(activeEffect);
    }
  }

  notify() {
    this.subscribers.forEach(effect => {
      effect();
    });
  }
}

let activeEffect = null;

function effect(fn) {
  activeEffect = fn;
  fn(); // 立即执行一次，以便收集初始依赖
  activeEffect = null;
}

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      const dep = getDep(target, key);
      dep.depend(); // 收集依赖
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      Reflect.set(target, key, value, receiver);
      const dep = getDep(target, key);
      dep.notify(); // 触发更新
      return true;
    }
  });
}

const targetMap = new WeakMap();

function getDep(target, key) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
        depsMap = new Map();
        targetMap.set(target, depsMap);
    }

    let dep = depsMap.get(key);
    if (!dep) {
        dep = new Dep();
        depsMap.set(key, dep);
    }

    return dep;
}

// 示例用法
const data = reactive({ count: 0, another: 'hello' });

effect(() => {
  console.log(`Count is: ${data.count}, Another is: ${data.another}`);
});

data.count++; // 触发更新
data.another = 'world'; // 触发更新

这个简化的例子展示了依赖收集和触发更新的基本原理。 Dep 类负责管理依赖列表。 reactive 函数使用 Proxy 来拦截对对象的访问和修改，并在 get 拦截器中收集依赖，在 set 拦截器中触发更新。 effect 函数用于注册 effect 函数，并设置 activeEffect 全局变量，以便在依赖收集期间知道当前正在执行的 effect。

依赖追踪的优势

自动依赖追踪是 watchEffect 的一个重要优势。它简化了代码，减少了手动维护依赖关系的需要，并降低了出错的可能性。

`watchEffect` 的选项

watchEffect 接受一个可选的选项对象，允许你更精细地控制其行为。

`flush` 选项

flush 选项控制 effect 的刷新时机。它有三个可能的值：

'pre' (默认值): 在组件更新之前刷新 effect。
'post': 在组件更新之后刷新 effect。
'sync': 同步刷新 effect。谨慎使用，可能导致性能问题。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
  console.log('Increment function called'); // 在count更新前
};

watchEffect(() => {
  console.log(`Count in watchEffect: ${count.value}`); //在组件更新之后
}, {
  flush: 'post'
});
</script>

在这个例子中，flush: 'post' 确保 watchEffect 的回调函数在组件更新之后执行。因此，控制台会先打印 "Increment function called"，然后打印 "Count in watchEffect: [新的 count 值]"。如果没有 flush: 'post' 选项， watchEffect 会在组件更新之前执行，导致打印的 count 值可能与预期不符。

`onTrack` 和 `onTrigger` 选项

onTrack 和 onTrigger 选项允许你调试依赖追踪过程。

onTrack：在依赖项被追踪时调用。
onTrigger：在依赖项触发 effect 时调用。

这两个选项可以帮助你理解 watchEffect 如何追踪依赖以及何时重新执行。

<template>
  <div>
    <p>A: {{ a }}</p>
    <p>B: {{ b }}</p>
    <button @click="update">Update</button>
  </div>
</template>

<script setup>
import { ref, watchEffect } from 'vue';

const a = ref(1);
const b = ref(2);

const update = () => {
  a.value++;
  b.value++;
};

watchEffect(() => {
  console.log(`A: ${a.value}, B: ${b.value}`);
}, {
  onTrack(e) {
    console.log('Tracked:', e);
  },
  onTrigger(e) {
    console.log('Triggered:', e);
  }
});
</script>

在这个例子中，onTrack 会在 a.value 和 b.value 被追踪时调用， onTrigger 会在 a.value 或 b.value 触发 effect 时调用。通过观察控制台输出，你可以了解 watchEffect 如何工作。

停止 `watchEffect`

watchEffect 返回一个停止函数，你可以调用该函数来停止 effect 的执行。

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="stop">Stop</button>
  </div>
</template>

<script setup>
import { ref, watchEffect, onUnmounted } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

const stopHandle = watchEffect(() => {
  console.log(`Count is: ${count.value}`);
});

const stop = () => {
  stopHandle();
};

onUnmounted(() => {
    stopHandle(); // 组件卸载时停止 effect，防止内存泄漏
});
</script>

在这个例子中，点击 "Stop" 按钮会停止 watchEffect 的执行。同时， onUnmounted 钩子函数确保在组件卸载时停止 effect，防止内存泄漏。

`watchEffect` 的使用场景

watchEffect 非常适合以下场景：

副作用函数: 执行需要依赖响应式数据的副作用，例如更新 DOM、发送网络请求、操作 localStorage 等。
自动更新: 当依赖项发生变化时，自动更新某些状态或执行某些操作。
简化代码: 避免手动维护依赖关系，简化代码逻辑。

避免陷阱

虽然 watchEffect 非常强大，但也需要注意一些潜在的陷阱：

过度追踪: watchEffect 会追踪回调函数中访问的所有响应式数据。如果回调函数中包含不必要的代码，可能会导致过度追踪，降低性能。尽量保持回调函数简洁，只访问真正需要的响应式数据。
无限循环: 如果回调函数中修改了它所依赖的响应式数据，可能会导致无限循环。例如：
```
const count = ref(0);

watchEffect(() => {
  count.value++; // 错误：修改了依赖项
  console.log(count.value);
});
```
在这个例子中，watchEffect 会无限循环执行，因为每次执行都会修改 count.value，从而触发下一次执行。避免在 watchEffect 的回调函数中修改依赖项。如果需要修改依赖项，请使用 watch 并显式指定要观察的属性。
内存泄漏: 如果 watchEffect 在组件卸载后仍然执行，可能会导致内存泄漏。确保在组件卸载时停止 effect。
不必要的执行: 即使依赖项的值没有实际变化，但如果它们是引用类型，watchEffect 仍然可能重新执行。例如：
```
const obj = ref({ a: 1 });

watchEffect(() => {
  console.log(obj.value);
});

// 即使 obj.value.a 没有变化，这个操作仍然会触发 watchEffect
obj.value = { a: 1 };
```
这是因为 obj.value 是一个对象，即使它的属性值没有变化，但每次赋值都会创建一个新的对象，导致 watchEffect 认为依赖项发生了变化。可以使用 deep: true 选项来深度比较对象的变化，或者使用 watch 并手动比较对象的变化。但是要注意深度比较带来的性能影响。

与 `watch` 的比较

特性	`watchEffect`	`watch`
依赖追踪	自动	手动
显式指定依赖	不需要	需要
初始执行	立即执行一次	默认情况下，仅在依赖项发生变化时执行 (可以通过 `immediate: true` 选项使其立即执行)
返回值	停止函数	停止函数
用途	执行副作用函数，自动更新状态	观察特定属性或表达式的变化，执行副作用函数

选择 watchEffect 还是 watch 取决于具体的需求。如果你需要自动追踪依赖并执行副作用函数，watchEffect 是一个不错的选择。如果你需要观察特定属性或表达式的变化，watch 更加适合。

总结：`watchEffect` 依赖追踪的精髓

watchEffect 通过 Vue 3 的响应式系统实现自动依赖追踪，简化了代码编写并降低了维护成本。理解其依赖追踪机制，注意潜在的陷阱，可以帮助你编写高效、可维护的 Vue 应用。记住，watchEffect 非常适合执行副作用，而 watch 更适合观察特定属性的变化。

Vue 3 的 watchEffect：深入依赖追踪机制

什么是 watchEffect？

基本用法

依赖追踪的原理

具体代码模拟依赖收集过程 (简化版)

依赖追踪的优势

watchEffect 的选项

flush 选项

onTrack 和 onTrigger 选项

停止 watchEffect

watchEffect 的使用场景