大家好，我是你们的 Vue 3 响应式老司机，今天带大家深入扒一扒 Track/Trigger 的底裤！
咱们今天不搞虚的，直接上干货。Vue 3 的响应式系统，那可是它性能提升的关键。理解了 Track/Trigger，就相当于掌握了 Vue 3 的内功心法，以后看源码、解决问题都能事半功倍。
一、响应式系统的核心：依赖收集与派发更新
在讲 Track/Trigger 之前，咱们先明确一个概念：Vue 3 响应式系统的核心在于依赖收集 (Dependency Collection) 和 派发更新 (Update Dispatch)。
- 依赖收集：简单来说，就是搞清楚谁用了我的数据，把这些“使用者”记录下来，方便以后我数据变动的时候通知他们。
- 派发更新：当数据发生变化时，找到所有依赖该数据的“使用者”，通知他们进行更新。
想象一下，你是一个包租婆，你的房子（响应式数据）被很多房客（组件）租住。依赖收集就是你记录下每个房客租了哪间房，派发更新就是当你涨房租（数据变化）的时候，挨个通知这些房客。
二、Track：依赖收集的利器
Track 的作用，就是在读取响应式数据的时候，把当前正在运行的 effect 函数（通常是组件的渲染函数）收集到该数据的依赖集合中。
2.1 响应式对象（Reactive Object）的诞生
首先，我们要知道，Vue 3 使用 Proxy 来创建响应式对象。Proxy 允许我们拦截对对象的操作，例如读取属性 (get) 和设置属性 (set)。
const target = { name: 'Vue', version: 3 };
const reactiveHandler = {
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 (oldValue !== value) {
// 在这里进行派发更新
trigger(target, key);
}
return result;
}
};
const reactiveData = new Proxy(target, reactiveHandler);
console.log(reactiveData.name); // 触发 track
reactiveData.version = 3.2; // 触发 trigger在这个例子中，reactiveHandler 定义了 get 和 set 拦截器。当访问 reactiveData.name 时，会触发 get 拦截器，而 get 拦截器会调用 track 函数进行依赖收集。
2.2 Track 函数的内部实现
Track 函数的核心任务是将当前激活的 effect 函数（activeEffect）添加到指定 target 的指定 key 的依赖集合中。
// 存储依赖关系的全局 WeakMap
const targetMap = new WeakMap();
// 当前激活的 effect 函数
let activeEffect = null;
// effect 函数，用于注册副作用
function effect(fn) {
const effectFn = () => {
activeEffect = effectFn;
try {
return fn(); // 触发依赖收集
} finally {
activeEffect = null;
}
};
effectFn(); // 立即执行一次
return effectFn;
}
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);
}
}我们来拆解一下：
targetMap: 这是一个WeakMap，用于存储所有响应式对象及其依赖关系。Key 是target对象，Value 是一个Map。depsMap: 这是一个Map，用于存储特定target对象中每个属性的依赖集合。Key 是属性名key，Value 是一个Set。deps: 这是一个Set，用于存储依赖于特定属性key的所有 effect 函数。activeEffect: 这是一个全局变量，指向当前正在运行的 effect 函数。effect(fn): 这个函数用于注册副作用。它接受一个函数fn作为参数，创建一个 effect 函数effectFn，并将activeEffect设置为effectFn。然后，它会立即执行effectFn，从而触发依赖收集。最后，它返回effectFn，以便可以手动停止 effect。
工作流程：
- 当读取响应式对象的属性时，例如
reactiveData.name，会触发get拦截器。 get拦截器调用track(target, key)。track函数首先检查activeEffect是否存在。如果不存在，说明当前没有 effect 函数在运行，直接返回。- 如果
activeEffect存在，说明当前正在运行一个 effect 函数，我们需要将它添加到依赖集合中。 track函数首先从targetMap中获取target对应的depsMap。如果depsMap不存在，创建一个新的Map并将其添加到targetMap中。- 然后，
track函数从depsMap中获取key对应的deps。如果deps不存在，创建一个新的Set并将其添加到depsMap中。 - 最后，
track函数将activeEffect添加到deps中。
举个栗子：
const data = reactive({ name: 'Vue' });
effect(() => {
console.log('Name changed:', data.name); // 触发依赖收集
});
data.name = 'React'; // 触发派发更新在这个例子中，effect 函数会立即执行，从而触发 data.name 的 get 拦截器，并调用 track 函数。track 函数会将当前的 effect 函数添加到 data.name 的依赖集合中。
三、Trigger：派发更新的号角
Trigger 的作用，就是在响应式数据发生变化的时候，找到所有依赖该数据的 effect 函数，并执行它们。
3.1 Trigger 函数的内部实现
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return; // 没有依赖，直接返回
const deps = depsMap.get(key);
if (!deps) return; // 没有依赖，直接返回
deps.forEach(effectFn => {
effectFn(); // 执行 effect 函数
});
}工作流程：
- 当设置响应式对象的属性时，例如
reactiveData.version = 3.2，会触发set拦截器。 set拦截器调用trigger(target, key)。trigger函数首先从targetMap中获取target对应的depsMap。如果depsMap不存在，说明该对象没有依赖，直接返回。- 然后，
trigger函数从depsMap中获取key对应的deps。如果deps不存在，说明该属性没有依赖，直接返回。 - 如果
deps存在，trigger函数会遍历deps中的所有 effect 函数，并执行它们。
继续上面的栗子：
const data = reactive({ name: 'Vue' });
effect(() => {
console.log('Name changed:', data.name); // 触发依赖收集
});
data.name = 'React'; // 触发派发更新当执行 data.name = 'React' 时，会触发 set 拦截器，并调用 trigger(data, 'name')。trigger 函数会找到依赖于 data.name 的 effect 函数（也就是我们之前定义的那个），并执行它。因此，控制台会输出 "Name changed: React"。
四、Track/Trigger 的关系：相辅相成，缺一不可
Track 和 Trigger 是 Vue 3 响应式系统的两个核心组成部分，它们共同协作，实现了数据的响应式更新。
- Track 负责收集依赖，记录哪些 effect 函数依赖于哪些数据。
- Trigger 负责派发更新，当数据发生变化时，通知所有依赖该数据的 effect 函数执行。
没有 Track，Trigger 就不知道要通知谁；没有 Trigger，Track 收集的依赖就毫无意义。它们就像一对形影不离的好基友，共同维护着 Vue 3 的响应式世界。
五、更高级的用法和优化
当然，Vue 3 的响应式系统远不止这么简单。为了提高性能，它还做了一些优化，例如：
- 调度器 (Scheduler)：将多个更新合并到一个任务中执行，避免重复渲染。
- 计算属性 (Computed Properties)：缓存计算结果，只有当依赖发生变化时才重新计算。
- 只读 (Readonly)：创建只读的响应式对象，防止意外修改。
- 浅响应式 (Shallow Reactive)：只对对象的第一层属性进行响应式处理，提高性能。
5.1 调度器 (Scheduler)
Vue 3 使用调度器来优化更新过程。当多个响应式数据同时发生变化时，调度器会将这些更新合并到一个任务中执行，避免重复渲染。这可以显著提高性能，尤其是在处理大量数据时。
// 简单的调度器实现
const jobQueue = new Set();
let isFlushing = false;
const resolvePromise = Promise.resolve();
function flushJob() {
if (isFlushing) return;
isFlushing = true;
resolvePromise.then(() => {
jobQueue.forEach(job => job());
}).finally(() => {
isFlushing = false;
jobQueue.clear();
});
}
function queueJob(job) {
jobQueue.add(job);
flushJob();
}
function trigger(target, key) {
const depsMap = targetMap.get(target);
if (!depsMap) return;
const deps = depsMap.get(key);
if (!deps) return;
deps.forEach(effectFn => {
// 使用调度器
queueJob(effectFn);
});
}在这个例子中，我们使用 queueJob 函数将 effect 函数添加到任务队列中。flushJob 函数会在下一个事件循环中执行任务队列中的所有 effect 函数。这样可以确保所有的更新都在同一个任务中执行，避免重复渲染。
5.2 计算属性 (Computed Properties)
计算属性是一种特殊的响应式数据，它的值是根据其他响应式数据计算得出的。Vue 3 会缓存计算属性的结果，只有当依赖发生变化时才重新计算。这可以避免不必要的计算，提高性能。
function computed(getter) {
let value;
let dirty = true;
const effectFn = effect(getter, {
lazy: true,
scheduler: () => {
dirty = true;
}
});
const computedObj = {
get value() {
if (dirty) {
value = effectFn();
dirty = false;
}
return value;
}
};
return computedObj;
}
const data = reactive({ a: 1, b: 2 });
const sum = computed(() => data.a + data.b);
console.log(sum.value); // 3 (触发计算)
data.a = 3;
console.log(sum.value); // 3 (从缓存中读取)在这个例子中，computed 函数接受一个 getter 函数作为参数，该 getter 函数根据其他响应式数据计算出一个值。computed 函数会创建一个 effect 函数，并将 lazy 选项设置为 true，这意味着 effect 函数不会立即执行。computed 函数还会创建一个 scheduler 函数，当依赖发生变化时，scheduler 函数会将 dirty 标志设置为 true。
当访问 sum.value 时，会触发 get 拦截器。如果 dirty 标志为 true，说明依赖发生了变化，我们需要重新计算 sum 的值。get 拦截器会执行 effect 函数，并将结果缓存起来。然后，get 拦截器会将 dirty 标志设置为 false。
5.3 只读 (Readonly)
有时候，我们需要创建只读的响应式对象，防止意外修改。Vue 3 提供了 readonly 函数来实现这个功能。
const data = reactive({ name: 'Vue' });
const readonlyData = readonly(data);
readonlyData.name = 'React'; // 报错：Cannot set property name of #<Object> which has only a getter在这个例子中，readonly 函数会创建一个只读的响应式对象。当我们尝试修改 readonlyData.name 时，会报错。
5.4 浅响应式 (Shallow Reactive)
有时候，我们只需要对对象的第一层属性进行响应式处理，而不需要对嵌套对象进行递归处理。这可以提高性能，尤其是在处理大型对象时。Vue 3 提供了 shallowReactive 函数来实现这个功能。
const data = shallowReactive({ name: 'Vue', nested: { version: 3 } });
effect(() => {
console.log('Name changed:', data.name);
});
data.name = 'React'; // 触发更新
data.nested.version = 3.2; // 不会触发更新在这个例子中，shallowReactive 函数会创建一个浅响应式对象。当我们修改 data.name 时，会触发更新。但是，当我们修改 data.nested.version 时，不会触发更新。
六、总结：Track/Trigger 的重要性
Track 和 Trigger 是 Vue 3 响应式系统的基石。它们通过依赖收集和派发更新，实现了数据的自动更新，让开发者可以更专注于业务逻辑的实现，而不用手动管理 DOM 更新。理解 Track/Trigger 的工作原理，可以帮助我们更好地理解 Vue 3 的响应式系统，并能够更有效地使用 Vue 3 来开发高性能的应用程序。
最后，再用包租婆的例子总结一下：
- Track： 包租婆拿着小本本，记录下每个房客租了哪间房 (依赖收集)。
- Trigger： 包租婆涨房租了，挨个敲门通知对应的房客 (派发更新)。
希望今天的讲解能帮助大家更深入地理解 Vue 3 的响应式系统。下次有机会再给大家分享 Vue 3 的其他特性！ 溜了溜了~