各位观众老爷们，掌声在哪里！今天咱们不聊八卦，不谈风月，就聊聊 Vue 3 响应式系统里那个神奇的 effect 函数。 它，就是让你的页面动起来，数据一变，UI立马刷新的幕后英雄。 准备好，咱们要开始解剖这个小可爱了！
开场白：响应式世界的“副作用”
话说，编程世界里有个让人头疼的家伙，叫“副作用”。 简单来说，一个函数执行后，除了返回值，还偷偷摸摸地改变了函数外部的东西，这就是副作用。 Vue 的响应式系统也离不开副作用，但它把副作用变成了优点，让数据驱动视图成为可能。
effect 函数，就是用来封装这些响应式副作用的。 它的作用是：
- 注册副作用函数： 把你要执行的函数（通常是更新 UI 的函数）包裹起来。
- 追踪依赖： 当副作用函数执行时，Vue 会追踪它读取了哪些响应式数据。
- 触发更新： 当这些响应式数据发生变化时，Vue 会重新执行这个副作用函数。
听起来有点绕？ 没关系，咱们一步步来。
第一幕：effect 函数的真面目
先来看一段简化的 effect 函数实现（别害怕，源码比这复杂多了，但核心思想是一样的）：
// activeEffect 用于存储当前激活的 effect
let activeEffect = null;
// effectStack 用于处理嵌套的 effect
const effectStack = [];
function effect(fn, options = {}) {
const effectFn = () => {
// 避免重复执行
if (!effectFn.active) {
return options.scheduler ? undefined : fn() //options.scheduler 调度器, 决定 effect 函数何时执行
}
try {
effectStack.push(effectFn);
activeEffect = effectFn;
return fn(); // 执行 fn，触发依赖收集
} finally {
effectStack.pop();
activeEffect = effectStack[effectStack.length - 1];
}
};
effectFn.deps = []; // 存储依赖集合
effectFn.active = true; // 标记 effect 是否激活
effectFn.options = options; // 存储 options
effectFn.scheduler = options.scheduler;
if (!options.lazy) { // lazy 是否懒执行, 默认为false
effectFn(); // 立即执行一次
}
return effectFn;
}
function stop(effectFn) {
if (effectFn.active) {
cleanup(effectFn);
effectFn.active = false;
}
}
function cleanup(effectFn) {
for (let i = 0; i < effectFn.deps.length; i++) {
const deps = effectFn.deps[i];
deps.delete(effectFn);
}
effectFn.deps.length = 0;
}activeEffect： 这是一个全局变量，用来存储当前正在执行的effect函数。 就像一个“正在营业”的牌子，告诉 Vue 现在哪个effect在工作。effectStack： 这个栈是为了处理嵌套的effect。 想象一下，一个effect函数里面又调用了另一个effect函数， 这时候就需要用栈来记录effect的执行顺序。effectFn： 这是effect函数返回的包装后的函数。 它记录了依赖关系，并且负责执行用户传入的fn。options： 允许我们传入一些配置项，比如scheduler（调度器，用于控制effect的执行时机）和lazy（是否懒执行）。effectFn.deps： 这是一个数组，存储了当前effect函数依赖的所有Set集合。 每个Set对应一个响应式对象上的属性。cleanup： 清除 effectFn 中的依赖，避免内存泄漏。
第二幕：track 函数，追踪依赖的侦察兵
track 函数的作用是“追踪”依赖关系。 也就是说，当 activeEffect 存在时，它会把当前正在执行的 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 dep = depsMap.get(key);
if (!dep) {
dep = new Set();
depsMap.set(key, dep);
}
trackEffects(dep);
}
function trackEffects(dep) {
if (!activeEffect) return;
if (!dep.has(activeEffect)) {
dep.add(activeEffect);
activeEffect.deps.push(dep); // 将依赖集合添加到 effectFn.deps 中
}
}targetMap： 这是一个WeakMap，用于存储所有响应式对象的依赖关系。 它的 key 是响应式对象（target），value 是一个Map。depsMap： 这是一个Map，存储了单个响应式对象的所有属性的依赖关系。 它的 key 是属性名（key），value 是一个Set。dep： 这是一个Set，存储了依赖于特定属性的所有effect函数。trackEffects： 将 effectFn 添加到 dep 中，并且将 dep 添加到 effectFn.deps 中。
简单来说，track 函数就像一个侦察兵，监视着响应式数据的读取操作。 当它发现有 effect 函数在读取某个响应式数据时，就会把这个 effect 函数记录下来，放到这个数据的依赖集合里。
第三幕：trigger 函数，触发更新的指挥官
trigger 函数的作用是“触发”更新。 当响应式数据发生变化时，它会找到所有依赖于这个数据的 effect 函数，然后执行它们。
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return; // 没有依赖，直接返回
const dep = depsMap.get(key);
if (!dep) return; // 没有依赖，直接返回
triggerEffects(dep);
}
function triggerEffects(dep) {
const effectsToRun = new Set(dep);
effectsToRun.forEach((effectFn) => {
if (effectFn !== activeEffect) { //避免无限循环
if (effectFn.scheduler) {
effectFn.scheduler(effectFn)
} else {
effectFn();
}
}
});
}effectsToRun： 创建一个新的Set，避免在迭代过程中修改dep。effectFn.scheduler： 如果effect函数有调度器，就执行调度器，否则直接执行effect函数。effectFn !== activeEffect： 避免无限循环触发。
trigger 函数就像一个指挥官，当它收到数据变化的信号时，就会找到所有“士兵”（effect 函数），然后命令他们执行任务（更新 UI）。
第四幕：三剑客的配合演出
现在，让我们把 effect、track 和 trigger 放在一起，看看它们是如何配合工作的。
// 1. 创建一个响应式对象
const data = reactive({ count: 0 });
// 2. 创建一个 effect 函数，用于更新 UI
effect(() => {
console.log("count is:", data.count); // 当 data.count 变化时，会重新执行
});
// 3. 修改响应式数据
data.count++; // 触发更新
// 简化后的 reactive 函数
function reactive(target) {
return new Proxy(target, {
get(target, key, receiver) {
track(target, key); // 追踪依赖
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
const oldValue = target[key];
const result = Reflect.set(target, key, value, receiver);
if (value !== oldValue) {
trigger(target, key); // 触发更新
}
return result;
},
});
}reactive函数： 这个函数用于把普通对象转换成响应式对象。 它使用了Proxy对象，拦截了对象的读取（get）和修改（set）操作。- 读取操作（
get）： 当读取响应式对象的属性时，get拦截器会调用track函数，追踪依赖关系。 - 修改操作（
set）： 当修改响应式对象的属性时，set拦截器会调用trigger函数，触发更新。
过程分解：
effect注册：effect函数被调用，activeEffect指向这个effect函数。effect执行：effect函数内部读取了data.count。track追踪：get拦截器被触发，track函数被调用，把当前的effect函数添加到data.count的依赖集合中。- 数据修改：
data.count被修改。 trigger触发：set拦截器被触发，trigger函数被调用，找到data.count的依赖集合，执行其中的effect函数。- UI 更新：
effect函数重新执行，更新 UI。
第五幕：进阶用法：scheduler 和 lazy
Vue 3 的 effect 函数还提供了 scheduler 和 lazy 两个选项，让我们可以更灵活地控制更新时机。
scheduler： 调度器。 它允许我们自定义effect函数的执行时机。 比如，我们可以使用scheduler来实现防抖或节流。
const data = reactive({ count: 0 });
effect(
() => {
console.log("count is:", data.count);
},
{
scheduler: (effectFn) => {
setTimeout(effectFn, 1000); // 1 秒后执行
},
}
);
data.count++; // 不会立即执行，而是在 1 秒后执行
data.count++; // 不会立即执行，而是在 1 秒后执行lazy： 懒执行。 如果设置为true，effect函数不会立即执行，而是等到需要的时候再手动执行。
const data = reactive({ count: 0 });
const runner = effect(
() => {
console.log("count is:", data.count);
},
{
lazy: true,
}
);
// runner(); // 手动执行 effect 函数
data.count++; // 不会立即执行，因为 effect 函数还没有执行过
runner(); // 手动执行 effect 函数, 触发更新第六幕：避免无限循环
在 triggerEffects 函数中，我们加入了 effectFn !== activeEffect 的判断，这是为了避免无限循环。 考虑以下场景：
const data = reactive({ a: 0, b: 0 });
effect(() => {
data.a = data.b + 1;
});
effect(() => {
data.b = data.a + 1;
});如果没有 effectFn !== activeEffect 的判断，当 data.b 发生变化时，会触发第一个 effect 函数，然后修改 data.a，接着又会触发第二个 effect 函数，修改 data.b，如此循环往复，导致堆栈溢出。
第七幕：stop 函数
stop 函数用于停止 effect 函数的执行。 当我们不再需要某个 effect 函数时，可以调用 stop 函数来移除它的依赖关系，避免不必要的更新。
const data = reactive({ count: 0 });
const runner = effect(() => {
console.log("count is:", data.count);
});
data.count++; // 触发更新
stop(runner); // 停止 effect 函数
data.count++; // 不会触发更新总结陈词：响应式系统的灵魂
effect 函数是 Vue 3 响应式系统的核心组成部分。 它通过与 track 和 trigger 配合，实现了数据驱动视图的机制。 理解 effect 函数的工作原理，可以帮助我们更好地理解 Vue 的响应式系统，从而写出更高效、更易维护的代码。
表格总结：
| 函数/变量 | 作用 |
|---|---|
effect |
注册副作用函数，追踪依赖，触发更新。 |
activeEffect |
存储当前正在执行的 effect 函数。 |
track |
追踪依赖关系，把 effect 函数添加到响应式数据的依赖集合中。 |
trigger |
触发更新，找到所有依赖于某个响应式数据的 effect 函数，然后执行它们。 |
targetMap |
存储所有响应式对象的依赖关系。 |
depsMap |
存储单个响应式对象的所有属性的依赖关系。 |
dep |
存储依赖于特定属性的所有 effect 函数。 |
scheduler |
调度器，允许我们自定义 effect 函数的执行时机。 |
lazy |
懒执行，如果设置为 true，effect 函数不会立即执行，而是等到需要的时候再手动执行。 |
stop |
停止 effect 函数的执行，移除它的依赖关系。 |
好了，今天的讲座就到这里。 希望大家对 Vue 3 的 effect 函数有了更深入的了解。 记住，理解源码，才能更好地驾驭框架！ 下次再见！