咳咳，各位观众老爷，大家好！今天咱们不聊风花雪月，专攻Vue 3源码里的“Map与WeakMap的爱恨情仇”，特别是它们在依赖收集这块儿的骚操作。 准备好了吗？系好安全带，发车！
开场白：依赖收集，Vue的心脏
在Vue的世界里，数据驱动视图，视图因数据而变。但这“变”可不是随便乱变的，得知道哪些数据影响了哪些视图，才能精准打击，高效更新。这就是依赖收集要干的事儿。
简单来说，就是建立一个数据（响应式对象）和视图（组件渲染函数）之间的映射关系，当数据发生变化时，能快速找到受影响的视图，然后通知它们更新。
正片开始：主角登场！targetMap和effectMap
在Vue 3源码里，targetMap和effectMap是依赖收集的核心数据结构。它们都用到了Map和WeakMap，但用途和侧重点略有不同。
targetMap： 数据（target） -> 属性（key） -> 依赖（Set of effects）effectMap： effect -> 依赖（Set of targets）
别急，咱们慢慢拆解。
1. targetMap：大管家，管理数据与视图之间的关系
targetMap是一个WeakMap，它的键是响应式对象（target），值是一个Map，这个Map的键是响应式对象的属性（key），值是一个Set，这个Set里存放的是与该属性相关的副作用函数（effect）。
用人话说，就是targetMap记录了哪个对象的哪个属性被哪些视图（副作用函数）使用了。
// 简化版的targetMap结构
const targetMap = new WeakMap();
// 举个栗子：
const target = { name: '张三', age: 18 }; // 响应式对象
const key = 'name'; // 属性名
const effect1 = () => { console.log(`姓名：${target.name}`); }; // 副作用函数1
const effect2 = () => { console.log(`姓名：${target.name}，年龄：${target.age}`); }; // 副作用函数2
// 假设已经建立了依赖关系
if (!targetMap.has(target)) {
targetMap.set(target, new Map());
}
const depsMap = targetMap.get(target);
if (!depsMap.has(key)) {
depsMap.set(key, new Set());
}
const dep = depsMap.get(key);
dep.add(effect1);
dep.add(effect2);
// 现在，targetMap里就记录了target.name被effect1和effect2使用了为什么要用WeakMap？
关键就在于WeakMap对键（这里的target）是弱引用。这意味着，如果响应式对象target不再被其他地方引用，垃圾回收器就可以回收它，而不会因为targetMap还持有它的引用而导致内存泄漏。
如果使用普通的Map，即使target不再使用，targetMap仍然持有它的引用，它就无法被回收，导致内存泄漏。
2. effectMap：贴身保镖，记录副作用函数与数据之间的关系
effectMap是一个Map，它的键是副作用函数（effect），值是一个Set，这个Set里存放的是该副作用函数依赖的响应式对象。
用人话说，就是effectMap记录了哪个视图（副作用函数）使用了哪些数据。
// 简化版的effectMap结构
const effectMap = new Map();
// 举个栗子：
const effect = () => { console.log(`姓名：${target.name}，年龄：${target.age}`); }; // 副作用函数
const target1 = { name: '张三' }; // 响应式对象1
const target2 = { age: 18 }; // 响应式对象2
// 假设已经建立了依赖关系
if (!effectMap.has(effect)) {
effectMap.set(effect, new Set());
}
const deps = effectMap.get(effect);
deps.add(target1);
deps.add(target2);
// 现在，effectMap里就记录了effect依赖于target1和target2为什么要用Map？
因为effectMap需要主动管理副作用函数的生命周期。当副作用函数不再使用时，需要手动从effectMap中移除它，否则会造成内存泄漏。
如果使用WeakMap，当effect不再被其他地方引用时，WeakMap会自动移除对effect的引用，但我们无法主动控制这个过程，也就无法在副作用函数不再使用时执行一些清理操作。
3. 为什么要同时使用targetMap和effectMap？
看起来，targetMap已经能够记录数据和视图之间的关系了，为什么还需要effectMap呢？
原因在于性能优化。
当数据发生变化时，我们需要找到所有依赖于该数据的副作用函数，然后通知它们更新。使用targetMap可以快速找到这些副作用函数。
但是，当副作用函数不再使用时，我们需要从所有依赖于它的数据中移除该副作用函数。如果没有effectMap，我们需要遍历整个targetMap，找到所有包含该副作用函数的依赖关系，然后逐个移除。这个过程非常耗时。
有了effectMap，我们可以直接找到该副作用函数依赖的所有数据，然后从这些数据的依赖关系中移除该副作用函数。这个过程非常高效。
简单来说，targetMap用于快速查找依赖于特定数据的副作用函数，effectMap用于快速移除不再使用的副作用函数。两者配合使用，可以大大提高依赖收集的性能。
依赖收集的完整流程
咱们来模拟一下依赖收集的完整流程：
-
组件初始化/渲染： 执行副作用函数（render函数）。
-
访问响应式数据： 在副作用函数执行过程中，访问响应式数据。
-
收集依赖： 在
get拦截器中，将当前副作用函数和当前响应式对象及其属性关联起来，分别存储到targetMap和effectMap中。 -
数据更新： 在
set拦截器中，找到所有依赖于该数据的副作用函数，然后执行它们。 -
副作用函数销毁： 在组件卸载时，移除所有与该组件相关的副作用函数，并从
targetMap和effectMap中移除相应的依赖关系。
代码示例：模拟依赖收集
为了更直观地理解依赖收集的流程，咱们来写一个简化版的代码示例：
// 全局变量，用于存储当前激活的副作用函数
let activeEffect = null;
// 依赖收集器
const targetMap = new WeakMap();
const effectMap = new Map();
// 依赖收集函数
function track(target, key) {
if (!activeEffect) return; // 没有激活的副作用函数，直接返回
if (!targetMap.has(target)) {
targetMap.set(target, new Map());
}
const depsMap = targetMap.get(target);
if (!depsMap.has(key)) {
depsMap.set(key, new Set());
}
const dep = depsMap.get(key);
dep.add(activeEffect);
// effectMap的逻辑
if (!effectMap.has(activeEffect)) {
effectMap.set(activeEffect, new Set());
}
const effectDeps = effectMap.get(activeEffect);
effectDeps.add(target); // 注意这里只存了target，没有存key
}
// 触发更新函数
function trigger(target, key) {
if (!targetMap.has(target)) return; // 没有依赖关系，直接返回
const depsMap = targetMap.get(target);
if (!depsMap.has(key)) return; // 没有该属性的依赖关系，直接返回
const dep = depsMap.get(key);
dep.forEach(effect => {
effect(); // 执行副作用函数
});
}
// 副作用函数
function effect(fn) {
activeEffect = fn; // 激活副作用函数
fn(); // 立即执行一次，收集依赖
activeEffect = null; // 清空激活的副作用函数
}
// 创建响应式对象
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;
}
});
}
// 模拟组件卸载，从 effectMap 中清除 effect
function cleanupEffect(effectFn) {
const deps = effectMap.get(effectFn)
if (deps) {
deps.forEach(target => {
const depsMap = targetMap.get(target)
depsMap.forEach((dep, key) => {
dep.delete(effectFn)
})
})
effectMap.delete(effectFn)
}
}
// 示例
const data = reactive({ name: '张三', age: 18 });
const render = () => {
console.log(`姓名：${data.name}，年龄：${data.age}`);
};
effect(render); // 初始渲染，并收集依赖
data.name = '李四'; // 修改数据，触发更新
data.age = 20; // 修改数据，触发更新
// 模拟组件卸载
cleanupEffect(render);
data.name = '王五'; // 修改数据，不会触发更新，因为依赖关系已被移除代码解释：
activeEffect：用于存储当前正在执行的副作用函数。在副作用函数执行过程中，activeEffect会被设置为该副作用函数，这样在访问响应式数据时，就可以将当前副作用函数和当前响应式对象关联起来。track：用于收集依赖。它会将当前副作用函数和当前响应式对象及其属性关联起来，分别存储到targetMap和effectMap中。trigger：用于触发更新。它会找到所有依赖于该数据的副作用函数，然后执行它们。effect：用于创建副作用函数。它会将传入的函数包装成一个副作用函数，并在执行该函数之前激活它，以便收集依赖。reactive：用于创建响应式对象。它会使用Proxy拦截对象的get和set操作，并在get操作中收集依赖，在set操作中触发更新。cleanupEffect：用于清理副作用函数。组件卸载时调用，从effectMap和targetMap中移除相关信息
Map vs WeakMap：一场友谊赛
| 特性 | Map |
WeakMap |
|---|---|---|
| 键的类型 | 可以是任意类型 | 只能是对象 |
| 键的引用方式 | 强引用 | 弱引用 |
| 是否可迭代 | 可迭代，可以使用for...of循环遍历键值对 |
不可迭代，无法遍历键值对 |
| 垃圾回收 | 键不会阻止垃圾回收 | 键会被垃圾回收，当键不再被其他引用时 |
| 主要应用场景 | 存储需要长期维护的数据 | 存储与对象生命周期相关的数据，防止内存泄漏 |
| 在 Vue3 中的应用 | effectMap |
targetMap |
总结：Map和WeakMap的巧妙配合
Vue 3的依赖收集中，Map和WeakMap各司其职，共同维护着数据和视图之间的关系。
targetMap使用WeakMap，避免了因持有对响应式对象的强引用而导致的内存泄漏。effectMap使用Map，方便主动管理副作用函数的生命周期，在副作用函数不再使用时执行清理操作，提高性能。
这种巧妙的配合，既保证了依赖收集的效率，又避免了内存泄漏的风险，体现了Vue 3源码的精妙之处。
彩蛋：性能优化的小技巧
除了使用Map和WeakMap之外，Vue 3还使用了一些其他的技巧来优化依赖收集的性能：
- 静态提升 (Static Hoisting): 将不会变化的静态节点在编译时进行优化，避免重复创建和更新。
- Patch Flags: 通过静态标记，精确知道哪些属性发生了变化，避免不必要的更新。
- Tree-Shaking: 只打包用到的代码，减少包体积。
这些优化技巧，共同提升了Vue 3的性能，使其更加高效、稳定。
好啦，今天的讲座就到这里。希望大家通过今天的学习，对Vue 3源码中的Map和WeakMap有了更深入的理解。下次有机会，咱们再一起探索Vue 3源码的其他奥秘！ 拜拜！