深入分析 Vue 3 的 `effect`、`track`、`trigger` 机制，并解释它是如何实现精准的依赖收集和更新的。

观众朋友们，大家好！

今天咱们来聊聊 Vue 3 响应式系统的核心：effect、track、trigger，这三个小家伙是如何联手打造出精准依赖收集和更新的奇迹的。别害怕，虽然听起来有点玄乎，但咱们会用大白话和生动的例子，把它掰开了揉碎了讲清楚。

一、响应式系统的基本概念：就像你的影子一样

在深入源码之前，咱们先来个热身，理解一下什么是响应式系统。简单来说，它就像你的影子。你的动作（数据变化）会立即影响到你的影子（视图更新）。

在Vue的世界里，数据就是你，视图就是你的影子。响应式系统负责建立你和影子之间的紧密联系，确保你一动，影子立刻跟着动。

二、effect：副作用函数，干活的那个

effect 函数是响应式系统的发动机。它接受一个函数作为参数，这个函数通常就是更新视图的函数，我们称之为副作用函数（side effect function）。

// effect 接受一个函数，并立即执行它
function effect(fn) {
  const effectFn = () => {
    cleanup(effectFn); // 清理之前的依赖
    activeEffect = effectFn; // 标记当前激活的 effect
    fn(); // 执行副作用函数
    activeEffect = null; // 移除标记
  };

  effectFn.deps = []; // 用于存储依赖的集合
  effectFn(); // 立即执行一次
  return effectFn; // 返回 effectFn，方便后续操作
}

• cleanup(effectFn): 在执行副作用函数之前，需要先清理之前收集到的依赖。这是为了防止重复收集依赖，以及在依赖关系发生变化时，能够正确地更新依赖。
• activeEffect = effectFn: 这是一个全局变量，用于记录当前正在执行的 effect 函数。在执行副作用函数时，我们需要知道是谁在执行，以便在 track 函数中收集依赖。
• fn(): 这是真正的副作用函数，也就是我们要执行的更新视图的函数。
• activeEffect = null: 执行完副作用函数后，需要将 activeEffect 重置为 null，表示当前没有 effect 函数在执行。
• effectFn.deps = []: 每个 effectFn 都会有一个 deps 数组，用于存储它所依赖的所有 reactive 对象的依赖集合。
• effectFn(): effect 函数会立即执行一次传入的副作用函数。这是为了初始化视图，并收集初始的依赖关系。
• return effectFn: 返回 effectFn 方便后续停止 effect 的运行。

举个栗子：

let price = 10;
let quantity = 2;
let total = 0;

const update = () => {
  total = price * quantity;
  console.log('Total:', total);
};

effect(update); // 立即输出: Total: 20

price = 20; // 修改 price
// 不会自动更新 total，因为我们还没有建立 price 和 update 之间的依赖关系

现在 total 的值并没有因为 price 的改变而自动更新，因为我们还没有告诉系统 update 函数依赖于 price。 这时候就需要 track 函数来帮忙了。

三、track：依赖追踪，记录谁用了谁

track 函数的作用是追踪哪个 effect 函数使用了哪个响应式数据。它就像一个侦探，记录下每个 effect 函数都访问了哪些响应式属性。

const targetMap = new WeakMap(); // 用来存储所有 reactive 对象的依赖关系

function track(target, key) {
  if (!activeEffect) return; // 没有激活的 effect，直接返回
  let depsMap = targetMap.get(target); // 获取 target 对应的 depsMap
  if (!depsMap) {
    depsMap = new Map();
    targetMap.set(target, depsMap);
  }

  let dep = depsMap.get(key); // 获取 key 对应的 dep
  if (!dep) {
    dep = new Set();
    depsMap.set(key, dep);
  }

  if (!dep.has(activeEffect)) {
    dep.add(activeEffect); // 将 activeEffect 添加到 dep 中
    activeEffect.deps.push(dep); // 将 dep 添加到 activeEffect 的 deps 数组中
  }
}

• targetMap: 这是一个 WeakMap，用于存储所有 reactive 对象的依赖关系。target 是 reactive 对象本身，key 是对象的属性名，dep 是一个 Set，存储了所有依赖于该属性的 effect 函数。
• activeEffect: 在 effect 函数执行期间，activeEffect 会被设置为当前的 effect 函数。track 函数会检查 activeEffect 是否存在，如果不存在，则说明当前没有 effect 函数在执行，不需要收集依赖。
• dep: 这是一个 Set，用于存储所有依赖于某个属性的 effect 函数。使用 Set 可以确保同一个 effect 函数不会被重复添加。
• activeEffect.deps.push(dep): 将 dep 添加到 activeEffect 的 deps 数组中。这样做的目的是为了在 cleanup 函数中能够快速地找到所有依赖于该 effect 函数的 reactive 对象，并将它们从依赖关系中移除。

为了让 track 生效，我们需要先创建一个响应式对象：

function reactive(raw) {
  return new Proxy(raw, {
    get(target, key) {
      track(target, key); // 在 getter 中收集依赖
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      trigger(target, key); // 在 setter 中触发更新
      return true;
    }
  });
}

这个 reactive 函数使用 Proxy 拦截对象的 get 和 set 操作。在 get 中调用 track 函数，在 set 中调用 trigger 函数。

现在，让我们把上面的例子改造一下：

let product = reactive({ price: 10, quantity: 2 });
let total = 0;

const update = () => {
  total = product.price * product.quantity; // 访问了 product.price 和 product.quantity
  console.log('Total:', total);
};

effect(update); // 立即输出: Total: 20

product.price = 20; // 修改 product.price
// 现在会输出: Total: 40

现在，当 product.price 被修改时，update 函数会自动重新执行，total 的值也会随之更新。 这就是 track 的功劳！ 它记录了 update 函数依赖于 product.price 和 product.quantity，当这些值发生变化时，trigger 函数会通知 update 函数重新执行。

四、trigger：触发更新，通知谁该干活了

trigger 函数的作用是触发与响应式数据相关联的 effect 函数重新执行。它就像一个闹钟，当响应式数据发生变化时，它会叫醒所有依赖于该数据的 effect 函数。

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return; // 没有依赖，直接返回

  const dep = depsMap.get(key); // 获取 key 对应的 dep
  if (!dep) return; // 没有依赖，直接返回

  // 创建一个新的 Set，避免在迭代过程中修改 Set
  const effectsToRun = new Set(dep);
  effectsToRun.forEach(effectFn => effectFn()); // 遍历执行 effect
}

• depsMap: 从 targetMap 中获取 target 对应的 depsMap。如果 depsMap 不存在，则说明该 reactive 对象没有任何依赖，直接返回。
• dep: 从 depsMap 中获取 key 对应的 dep。如果 dep 不存在，则说明该属性没有任何依赖，直接返回。
• effectsToRun: 创建一个新的 Set，用于存储需要执行的 effect 函数。这样做是为了避免在迭代 dep 的过程中修改 dep，因为在执行 effect 函数的过程中可能会修改依赖关系。
• effectsToRun.forEach(effectFn => effectFn()): 遍历 effectsToRun，依次执行其中的 effect 函数。

回到上面的例子，当 product.price 被修改时，trigger 函数会被调用，它会找到所有依赖于 product.price 的 effect 函数，并依次执行它们。

五、cleanup：清理副作用，防止内存泄漏

cleanup 函数的作用是清理 effect 函数的依赖关系。当 effect 函数不再需要依赖于某个 reactive 对象时，我们需要将它们从依赖关系中移除，以防止内存泄漏。

function cleanup(effectFn) {
  for (let i = 0; i < effectFn.deps.length; i++) {
    const dep = effectFn.deps[i];
    dep.delete(effectFn); // 从 dep 中移除 effectFn
  }
  effectFn.deps.length = 0; // 清空 effectFn 的 deps 数组
}

• effectFn.deps: effectFn 的 deps 数组存储了所有依赖于该 effect 函数的 reactive 对象的依赖集合。
• dep.delete(effectFn): 从 dep 中移除 effectFn。
• effectFn.deps.length = 0: 清空 effectFn 的 deps 数组。

为什么需要 cleanup？ 举个例子，假设我们有一个组件，它依赖于一个 reactive 对象。当组件被卸载时，它不再需要依赖于该 reactive 对象。如果没有 cleanup，effect 函数仍然会存储在 reactive 对象的依赖集合中，导致内存泄漏。

六、 完整代码示例

为了更好地理解 effect、track 和 trigger 的工作原理，下面是一个完整的代码示例：

const targetMap = new WeakMap();
let activeEffect = null;

function effect(fn) {
  const effectFn = () => {
    cleanup(effectFn);
    activeEffect = effectFn;
    fn();
    activeEffect = null;
  };
  effectFn.deps = [];
  effectFn();
  return effectFn;
}

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

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

  if (!dep.has(activeEffect)) {
    dep.add(activeEffect);
    activeEffect.deps.push(dep);
  }
}

function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (!depsMap) return;

  const dep = depsMap.get(key);
  if (!dep) return;

  const effectsToRun = new Set(dep);
  effectsToRun.forEach(effectFn => effectFn());
}

function cleanup(effectFn) {
  for (let i = 0; i < effectFn.deps.length; i++) {
    const dep = effectFn.deps[i];
    dep.delete(effectFn);
  }
  effectFn.deps.length = 0;
}

function reactive(raw) {
  return new Proxy(raw, {
    get(target, key) {
      track(target, key);
      return target[key];
    },
    set(target, key, value) {
      target[key] = value;
      trigger(target, key);
      return true;
    }
  });
}

// 使用示例
let product = reactive({ price: 10, quantity: 2 });
let total = 0;

const update = () => {
  total = product.price * product.quantity;
  console.log('Total:', total);
};

effect(update); // 立即输出: Total: 20

product.price = 20; // 修改 product.price
// 现在会输出: Total: 40

product.quantity = 5; // 修改 product.quantity
// 现在会输出: Total: 100

七、精准依赖收集和更新的奥秘

Vue 3 的响应式系统之所以能够实现精准的依赖收集和更新，主要归功于以下几点：

1. 基于 Proxy 的拦截机制: Proxy 能够拦截对象的所有 get 和 set 操作，从而能够精确地追踪到哪些 effect 函数使用了哪些响应式数据。
2. 细粒度的依赖追踪: track 函数能够追踪到每个属性的依赖关系，而不是整个对象的依赖关系。这意味着只有当被依赖的属性发生变化时，才会触发更新，避免了不必要的更新。
3. 惰性更新: effect 函数不会立即执行，而是在响应式数据发生变化时才会被触发。这避免了在初始化时执行不必要的更新。
4. cleanup 函数: cleanup 函数能够及时清理不再需要的依赖关系，防止内存泄漏。

八、总结

咱们今天一起探索了 Vue 3 响应式系统的核心机制：effect、track 和 trigger。 这三个家伙分工明确，协同合作，共同构建了高效、精准的响应式系统。 通过 Proxy 拦截 get 和 set 操作，track 追踪依赖关系，trigger 触发更新，cleanup 清理副作用， Vue 3 能够实现细粒度的依赖收集和更新，从而提升应用的性能和用户体验。

希望今天的讲解能够帮助大家更好地理解 Vue 3 响应式系统的原理。记住，理解原理才能更好地运用技术，才能在遇到问题时快速找到解决方案。

感谢大家的收听，咱们下期再见！