各位靓仔靓女，今天我们来聊聊 Vue 3 响应式系统的核心骨架——effect、track 和 trigger 这仨兄弟，看看它们是怎么配合，把依赖收集和更新派发玩得风生水起的。
一、响应式系统的基本概念：先打个底
在深入源码之前，咱们先捋一捋响应式系统的基本概念，就像盖房子前要先打地基一样。
-
响应式数据 (Reactive Data): 这种数据一旦发生变化，依赖于它的视图或者其他计算属性会自动更新。Vue 的
ref、reactive就是用来创建响应式数据的。 -
依赖 (Dependency): 指的是哪些代码（通常是
effect函数）依赖于某个响应式数据。 -
依赖收集 (Dependency Tracking): 记录哪些
effect函数依赖于哪些响应式数据。 -
触发更新 (Triggering Updates): 当响应式数据发生变化时，通知所有依赖于它的
effect函数重新执行。
用大白话来说，就是：
- Vue 把数据变成“敏感”的，一有风吹草动（数据改变）就马上知道。
- Vue 记住哪些代码对这些“敏感”数据感兴趣。
- 当“敏感”数据发生变化时，Vue 会通知所有对它感兴趣的代码，让它们更新自己。
二、effect 函数：响应式系统的发动机
effect 函数是响应式系统的核心，它负责将一个函数变成一个“响应式副作用”。 简单来说，就是把一个函数包装一下，让它在依赖的响应式数据发生变化时自动重新执行。
// 简化版的 effect 函数
function effect(fn: Function, options: any = {}) {
const effectFn = () => {
try {
activeEffect = effectFn; // 关键：将当前 effectFn 设置为 activeEffect
return fn(); // 执行传入的函数，触发 getter，收集依赖
} finally {
activeEffect = null; // 执行完毕，重置 activeEffect
}
};
if (!options.lazy) {
effectFn(); // 立即执行一次
}
return effectFn;
}
// 全局变量，用于存储当前正在执行的 effect 函数
let activeEffect: Function | null = null;解读一下：
effect接收一个函数fn和一个可选的选项对象options。- 创建了一个
effectFn函数，它会：- 将
activeEffect设置为自身。这个全局变量很重要，后面track函数会用到它。 - 执行传入的函数
fn()。执行fn的过程中，如果访问了响应式数据，就会触发 getter，然后track函数就会登场。 - 执行完毕后，将
activeEffect重置为null。
- 将
- 如果
options.lazy为false（默认值），则立即执行effectFn()。 - 返回
effectFn，方便手动调用或者取消 effect。
重点：activeEffect 这个全局变量是关键，它就像一个“当前执行上下文”，告诉 track 函数，“嘿，是我正在访问这个响应式数据，帮我记录一下！”
三、track 函数：依赖收集的记录员
track 函数负责收集依赖，也就是将响应式数据和 effect 函数关联起来。当响应式数据的 getter 被访问时，track 函数会被调用，它会将当前的 activeEffect（也就是正在执行的 effect 函数）添加到该响应式数据的依赖集合中。
// 简化版的 track 函数
const targetMap = new WeakMap();
function track(target: object, key: string | symbol) {
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); // 将当前 effectFn 添加到依赖集合中
}
}解读一下：
targetMap是一个WeakMap，用于存储target（响应式对象）到depsMap（依赖映射）的映射关系。depsMap是一个Map，用于存储key（响应式对象的属性名）到deps（依赖集合）的映射关系。deps是一个Set，用于存储依赖于该属性的effect函数。track函数首先检查activeEffect是否存在，如果不存在，说明当前不是在effect函数中访问响应式数据，直接返回。- 如果
activeEffect存在，则：- 从
targetMap中获取target对应的depsMap，如果不存在，则创建一个新的depsMap并添加到targetMap中。 - 从
depsMap中获取key对应的deps，如果不存在，则创建一个新的deps并添加到depsMap中。 - 将
activeEffect添加到deps中。
- 从
重点：track 函数利用 targetMap、depsMap 和 deps 三层数据结构，建立了响应式对象、属性和 effect 函数之间的依赖关系。
用一张表格来总结一下：
| 数据结构 | 作用 | 存储内容 |
|---|---|---|
targetMap |
存储响应式对象和其依赖映射的关系 | WeakMap<target: object, depsMap: Map<string | symbol, deps: Set<Function>>> |
depsMap |
存储响应式对象的属性和依赖集合的关系 | Map<string | symbol, deps: Set<Function>> |
deps |
存储依赖于某个响应式对象属性的 effect 函数的集合 |
Set<Function> |
四、trigger 函数：更新派发的指挥官
trigger 函数负责触发更新，也就是当响应式数据发生变化时，通知所有依赖于它的 effect 函数重新执行。当响应式数据的 setter 被调用时，trigger 函数会被调用，它会从依赖集合中取出所有的 effect 函数，并依次执行它们。
// 简化版的 trigger 函数
function trigger(target: object, key: string | symbol) {
const depsMap = targetMap.get(target);
if (!depsMap) {
return; // 如果没有依赖，直接返回
}
const deps = depsMap.get(key);
if (!deps) {
return; // 如果没有依赖，直接返回
}
deps.forEach((effectFn: Function) => {
effectFn(); // 执行依赖的 effect 函数
});
}解读一下：
trigger函数首先从targetMap中获取target对应的depsMap，如果不存在，说明该响应式对象没有被任何effect函数依赖，直接返回。- 然后从
depsMap中获取key对应的deps，如果不存在，说明该响应式对象的属性没有被任何effect函数依赖，直接返回。 - 如果
deps存在，则遍历deps中的所有effect函数，并依次执行它们。
重点：trigger 函数通过查找 targetMap、depsMap 和 deps 三层数据结构，找到所有依赖于该响应式对象属性的 effect 函数，并执行它们，从而实现了更新派发。
五、reactive 函数：让数据“活”起来
reactive 函数负责将一个普通对象转换成响应式对象。它会递归地遍历对象的所有属性，并使用 Proxy 对每个属性进行拦截，从而实现依赖收集和更新派发。
// 简化版的 reactive 函数
function reactive(target: object) {
return new Proxy(target, {
get(target: object, key: string | symbol, receiver: any) {
const res = Reflect.get(target, key, receiver);
track(target, key); // 收集依赖
return res;
},
set(target: object, key: string | symbol, value: any, receiver: any) {
const oldValue = Reflect.get(target, key, receiver);
const res = Reflect.set(target, key, value, receiver);
if (value !== oldValue) {
trigger(target, key); // 触发更新
}
return res;
},
});
}解读一下：
reactive函数接收一个普通对象target，并返回一个Proxy对象。Proxy拦截了对象的get和set操作。- 在
get拦截器中，首先使用Reflect.get获取属性值，然后调用track函数收集依赖，最后返回属性值。 - 在
set拦截器中，首先使用Reflect.set设置属性值，然后比较新值和旧值是否相同，如果不同，则调用trigger函数触发更新，最后返回设置结果。
重点：reactive 函数利用 Proxy 对对象的属性进行拦截，从而在访问属性时收集依赖，在修改属性时触发更新，实现了响应式数据的核心机制。
六、它们是如何配合的：一个完整的例子
现在，让我们用一个完整的例子来演示 effect、track 和 trigger 是如何配合工作的。
// 1. 创建一个响应式对象
const data = reactive({
count: 0,
});
// 2. 创建一个 effect 函数
effect(() => {
console.log("count:", data.count);
});
// 3. 修改响应式数据
data.count++; // 触发更新
data.count++; // 再次触发更新执行过程分析：
reactive(data):reactive函数将data对象转换成响应式对象，并使用Proxy对其属性进行拦截。effect(() => { console.log("count:", data.count); }):effect函数被调用，activeEffect被设置为当前effectFn。effectFn执行，访问data.count，触发Proxy的get拦截器。get拦截器调用track(data, 'count')，将当前activeEffect（也就是effectFn）添加到data.count的依赖集合中。console.log("count:", data.count)执行，输出 "count: 0"。effectFn执行完毕，activeEffect被重置为null。
data.count++(第一次):data.count++触发Proxy的set拦截器。set拦截器调用trigger(data, 'count')，从data.count的依赖集合中取出effectFn，并执行它。effectFn再次执行，访问data.count，触发Proxy的get拦截器。get拦截器调用track(data, 'count')，由于effectFn已经存在于data.count的依赖集合中，因此不会重复添加。console.log("count:", data.count)执行，输出 "count: 1"。
data.count++(第二次): 与第一次类似，会再次触发effectFn执行，输出 "count: 2"。
总结：
effect函数负责创建响应式副作用，并将自身注册为响应式数据的依赖。track函数负责收集依赖，将effect函数和响应式数据关联起来。trigger函数负责触发更新，当响应式数据发生变化时，通知所有依赖于它的effect函数重新执行。reactive函数负责将普通对象转换成响应式对象，并使用Proxy对其属性进行拦截，从而实现依赖收集和更新派发。
七、更高级的用法： computed 和 watch
除了 effect 函数之外，Vue 3 还提供了 computed 和 watch 两个 API，它们都是基于 effect 函数实现的，但提供了更高级的功能。
computed: 用于定义计算属性，计算属性的值会被缓存，只有当依赖的响应式数据发生变化时才会重新计算。watch: 用于监听响应式数据的变化，并在数据发生变化时执行回调函数。
这两个 API 实际上是对 effect 函数的封装，它们都使用了 effect 函数的依赖收集和更新派发机制。
八、总结：响应式系统的精髓
Vue 3 的响应式系统是一个精心设计的系统，它通过 effect、track 和 trigger 三个核心函数，实现了精确的依赖收集和派发更新。
effect函数是响应式系统的发动机，负责创建响应式副作用。track函数是依赖收集的记录员，负责将effect函数和响应式数据关联起来。trigger函数是更新派发的指挥官，负责在响应式数据发生变化时，通知所有依赖于它的effect函数重新执行。
理解了这三个核心函数的工作原理，就掌握了 Vue 3 响应式系统的精髓，可以更好地使用 Vue 3 开发应用程序，也可以更好地理解 Vue 3 源码。
今天的讲座就到这里，希望大家有所收获！下次有机会再跟大家分享更多 Vue 3 的源码知识。散会！