剖析 Vue 3 源码中 `effect` 函数 (即响应式副作用函数) 的核心作用，以及它是如何与 `track` 和 `trigger` 配合工作的。

大家好，我是你们今天的 Vue 3 响应式原理特邀讲师，今天我们来聊聊 Vue 3 响应式系统的核心动力引擎——effect 函数，以及它如何与 track 和 trigger 这对黄金搭档，构建起 Vue 3 响应式世界的基石。

准备好了吗？系好安全带，咱们开始咯！

一、effect 函数：响应式宇宙的观察者

首先，我们得明确 effect 函数是干嘛的。简单来说，它就像一个观察者，时刻盯着你的 Vue 组件中的某些数据（响应式数据）。一旦这些数据发生变化，它就会立刻执行你预先设定的副作用函数。

听起来有点抽象？没关系，我们先来个小例子：

// 假设我们已经有了 reactive 函数，能够创建响应式对象
const data = reactive({ count: 0 });

// 定义一个副作用函数，当 count 改变时，打印新的 count 值
effect(() => {
  console.log("Count is now:", data.count);
});

// 修改 count 的值，触发副作用函数
data.count++; // 控制台输出: Count is now: 1
data.count = 10; // 控制台输出: Count is now: 10

在这个例子中，effect 函数接收一个回调函数作为参数。这个回调函数就是所谓的副作用函数。当 data.count 的值发生改变时，effect 函数就会自动执行这个副作用函数，打印出最新的 count 值。

那么，这个 effect 函数内部到底是怎么实现的呢？

其实，effect 函数的核心作用就是：

1. 存储副作用函数: 将传进来的副作用函数（也就是那个回调函数）存储起来，以便后续执行。
2. 立即执行副作用函数: 首次执行 effect 函数时，会立即执行一次副作用函数。
3. 建立依赖关系: 在副作用函数执行过程中，如果读取了响应式数据，effect 函数会与这些响应式数据建立依赖关系。

4. 触发副作用函数: 当依赖的响应式数据发生改变时，effect 函数会被重新触发，再次执行副作用函数。

   用更简洁的伪代码来表示：

function effect(fn, options = {}) {
  const effectFn = () => {
    try {
      activeEffect = effectFn; // 设置当前激活的 effect 函数
      return fn(); // 执行副作用函数
    } finally {
      activeEffect = null; // 清空当前激活的 effect 函数
    }
  };

  effectFn.options = options; // 保存 options
  effectFn.deps = []; // 存储依赖的响应式数据

  if (!options.lazy) {
    effectFn(); // 立即执行副作用函数 (除非设置了 lazy 选项)
  }

  return effectFn; // 返回 effect 函数
}

let activeEffect = null; // 当前激活的 effect 函数

这里 activeEffect 是一个全局变量，用于存储当前正在执行的 effect 函数。这很重要，因为在副作用函数执行过程中，我们需要知道是哪个 effect 函数在读取响应式数据，从而建立正确的依赖关系。

二、track 函数：建立依赖关系的月老

track 函数的作用是建立响应式数据和 effect 函数之间的依赖关系。 它就像一个月老，负责把 effect 函数和它所依赖的响应式数据牵线搭桥。

具体来说，当我们在副作用函数中读取响应式数据时，track 函数会被调用。它会做以下几件事：

1. 判断是否需要建立依赖: 首先，它会检查当前是否有正在激活的 effect 函数 (通过 activeEffect 变量判断)。如果没有，说明我们不是在 effect 函数中读取响应式数据，就不需要建立依赖关系。
2. 建立依赖关系: 如果有激活的 effect 函数，track 函数会将当前的 effect 函数添加到响应式数据的依赖集合中。
3. 双向存储依赖: 为了方便后续清除依赖关系，track 函数还会将响应式数据添加到 effect 函数的依赖列表中。

用代码来表示：

// targetMap 用于存储所有响应式对象的依赖关系
const targetMap = new WeakMap();

function track(target, key) {
  if (!activeEffect) return; // 没有激活的 effect 函数，直接返回

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

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

  if (!deps.has(activeEffect)) {
    deps.add(activeEffect); // 将当前的 effect 函数添加到依赖集合中
    activeEffect.deps.push(deps); // 将依赖集合添加到 effect 函数的依赖列表中
  }
}

这里，我们使用 WeakMap 作为 targetMap， Map 作为 depsMap， Set 作为 deps。

• targetMap 是一个 WeakMap，它的 key 是响应式对象 (target)，value 是一个 depsMap。
• depsMap 是一个 Map，它的 key 是响应式对象的属性名 (key)，value 是一个 deps。
• deps 是一个 Set，它存储了所有依赖于该属性的 effect 函数。

举个例子：

const data = reactive({ name: "John", age: 30 });

effect(() => {
  console.log("Name:", data.name); // 读取了 data.name
  console.log("Age:", data.age);   // 读取了 data.age
});

// 此时，targetMap 的结构大致如下：
// {
//   <data>: {
//     "name": Set { <effect 函数> },
//     "age": Set { <effect 函数> }
//   }
// }

// <effect 函数> 指的是上面定义的那个 effect 函数

在这个例子中，当我们执行 effect 函数时，会读取 data.name 和 data.age。 track 函数会被调用两次，分别建立 data.name 和 data.age 与 effect 函数之间的依赖关系。

三、trigger 函数：唤醒沉睡的副作用

trigger 函数的作用是触发那些依赖于某个响应式数据的 effect 函数。 它就像一个闹钟，当响应式数据发生改变时，它会叫醒所有依赖于该数据的 effect 函数，让它们重新执行。

具体来说，当一个响应式数据的值发生改变时，trigger 函数会被调用。它会做以下几件事：

1. 找到依赖集合: 根据响应式对象和属性名，从 targetMap 中找到所有依赖于该属性的 effect 函数。
2. 执行副作用函数: 遍历这些 effect 函数，依次执行它们。

用代码来表示：

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

  const deps = depsMap.get(key);
  if (!deps) return; // 没有依赖，直接返回

  // 创建一个副本，防止在执行 effect 函数的过程中，修改了 deps 集合
  const effectsToRun = new Set(deps);
  effectsToRun.forEach(effectFn => {
    if (effectFn !== activeEffect) { // 避免无限循环
      effectFn();
    }
  });
}

这里需要注意的是，我们创建了一个 effectsToRun 的副本，这是为了防止在执行 effect 函数的过程中，修改了 deps 集合，导致无限循环或其他问题。

举个例子：

const data = reactive({ name: "John", age: 30 });

effect(() => {
  console.log("Name:", data.name);
});

data.name = "Jane"; // 触发 trigger 函数

// 控制台输出: Name: Jane

在这个例子中，当我们修改 data.name 的值时，trigger 函数会被调用。它会找到依赖于 data.name 的 effect 函数，并执行它，从而打印出新的 name 值。

四、effect、track、trigger 的完美配合

现在，我们已经了解了 effect、track 和 trigger 这三个函数的作用。 它们是如何配合工作的呢？

可以用以下流程图来表示：

graph TD
    A[修改响应式数据] --> B{是否为响应式数据?};
    B -- 是 --> C[调用 trigger 函数];
    B -- 否 --> D[不处理];
    C --> E[查找依赖于该数据的 effect 函数];
    E --> F{是否存在 effect 函数?};
    F -- 是 --> G[执行 effect 函数];
    F -- 否 --> H[不处理];
    G --> I[effect 函数中读取响应式数据];
    I --> J{是否需要建立依赖?};
    J -- 是 --> K[调用 track 函数];
    J -- 否 --> L[不处理];
    K --> M[建立响应式数据和 effect 函数之间的依赖关系];

简单来说：

1. 当我们修改一个响应式数据时，会触发 trigger 函数。
2. trigger 函数会找到所有依赖于该数据的 effect 函数，并执行它们。
3. 在 effect 函数执行过程中，如果读取了其他的响应式数据，会触发 track 函数。
4. track 函数会建立这些响应式数据和 effect 函数之间的依赖关系。

这样，就形成了一个完整的响应式循环。

五、深入理解依赖收集

依赖收集是响应式系统的核心概念。 它指的是在 effect 函数执行过程中，自动追踪到所有被读取的响应式数据，并将它们与 effect 函数建立依赖关系的过程。

Vue 3 的依赖收集是细粒度的。 这意味着只有在 effect 函数中实际读取的响应式数据才会被追踪，而没有被读取的数据则不会被追踪。这可以避免不必要的更新，提高性能。

举个例子：

const data = reactive({ name: "John", age: 30, address: "Beijing" });

effect(() => {
  console.log("Name:", data.name);
  if (data.age > 20) {
    console.log("Age:", data.age);
  }
});

data.address = "Shanghai"; // 不会触发 effect 函数
data.age = 40; // 触发 effect 函数

在这个例子中，effect 函数只读取了 data.name 和 data.age，而没有读取 data.address。 因此，data.address 的改变不会触发 effect 函数。只有 data.age 的改变才会触发 effect 函数。

六、effect 函数的选项

effect 函数还提供了一些选项，可以让我们更灵活地控制副作用函数的行为。

选项	说明
lazy	如果设置为 true，则 effect 函数不会立即执行副作用函数。 而是返回一个函数，调用该函数才会执行副作用函数。
scheduler	允许开发者自定义副作用函数的执行时机。 当响应式数据发生改变时，不会立即执行副作用函数，而是执行 scheduler 函数。 scheduler 函数可以决定何时以及如何执行副作用函数。
onTrack	在 track 函数被调用时执行。 可以用来调试依赖收集过程。
onTrigger	在 trigger 函数被调用时执行。 可以用来调试副作用函数的触发过程。
onStop	在 stop 函数被调用时执行。 可以用来在停止 effect 函数时执行一些清理操作。

举个例子：

const data = reactive({ count: 0 });

const effectFn = effect(() => {
  console.log("Count:", data.count);
}, {
  lazy: true, // 延迟执行
  scheduler: (fn) => { // 自定义执行时机
    setTimeout(fn, 1000); // 1 秒后执行
  },
  onTrack(event) {
    console.log("Tracked:", event);
  },
  onTrigger(event) {
    console.log("Triggered:", event);
  }
});

// effectFn(); // 手动执行副作用函数

data.count++; // 1 秒后输出 "Count: 1"

在这个例子中，我们使用了 lazy 选项来延迟执行副作用函数，并使用了 scheduler 选项来自定义副作用函数的执行时机。

七、总结

effect、track 和 trigger 是 Vue 3 响应式系统的核心组成部分。 它们配合工作，实现了细粒度的依赖收集和高效的更新机制。

• effect 函数用于定义副作用函数，并建立与响应式数据的依赖关系。
• track 函数用于建立响应式数据和 effect 函数之间的依赖关系。
• trigger 函数用于触发那些依赖于某个响应式数据的 effect 函数。

理解这三个函数的工作原理，可以帮助我们更好地理解 Vue 3 的响应式系统，从而编写出更高效、更健壮的 Vue 应用。

希望今天的讲座能帮助大家更深入地理解 Vue 3 的响应式原理。 谢谢大家！