Vue 的依赖收集与更新：Set 和 Map 的幕后故事 (讲座版)
各位观众老爷，晚上好！我是今天的主讲人，江湖人称“Bug终结者”。今天咱们不聊源码大道理，就用大白话唠唠 Vue 响应式系统里的那些事儿，尤其是 Set 和 Map 这两位低调英雄。
Vue 的响应式系统，听起来高大上，其实说白了就是当你修改了数据，页面能自动更新。这背后就涉及到依赖收集和派发更新两个核心步骤。而 Set 和 Map，就在这两个步骤里默默发光发热。
1. 响应式系统的基本原理：先有因，后有果
在深入 Set 和 Map 之前，咱们先捋清楚 Vue 响应式系统的基本流程，免得一会儿听得云里雾里。
简单来说，Vue 的响应式系统可以分为以下几个阶段：
- 数据初始化 (Data Initialization)：Vue 会对组件的 data 选项中的数据进行“改造”，让它们变成“响应式”的。这个“改造”的核心就是利用
Object.defineProperty(Vue 2) 或Proxy(Vue 3) 来拦截数据的读取和修改操作。 - 依赖收集 (Dependency Collection)：当组件渲染或者执行计算属性时，会读取响应式数据。这时，Vue 会记录下来哪些组件或计算属性“依赖”了这个数据。 换句话说，就是建立一个“依赖关系”。
- 数据更新 (Data Update)：当响应式数据被修改时，Vue 会通知所有“依赖”了这个数据的组件或计算属性，告诉它们：“喂，数据变了，快去更新吧！”
- 派发更新 (Update Dispatch)：收到通知的组件或计算属性会重新渲染，从而实现页面的自动更新。
用一个简单的例子来说明：
// Vue 组件
const app = new Vue({
data() {
return {
message: 'Hello Vue!'
}
},
template: '<div>{{ message }}</div>'
})
app.$mount('#app')在这个例子中：
message是响应式数据。<div>{{ message }}</div>这个模板依赖了message。- 当我们修改
app.message的值时，<div>的内容会自动更新。
2. 依赖收集：Set 的妙用
依赖收集是整个响应式系统的关键。Vue 需要知道哪个数据被哪些组件或计算属性使用了，才能在数据更新时准确地通知到它们。 Set 的作用就在于此！
2.1 依赖收集的流程
- 读取数据触发 Getter：当组件或计算属性读取响应式数据时，会触发该数据的 Getter 函数 (通过
Object.defineProperty或Proxy定义)。 - 收集依赖：在 Getter 函数中，Vue 会将当前正在执行的组件或计算属性 (称为
activeEffect) 添加到该数据的依赖集合中。这个依赖集合通常使用 Set 数据结构来存储。 - 建立关联：同时，Vue 也会将该数据的依赖集合添加到当前组件或计算属性的依赖列表中，以便在组件卸载时清除依赖关系。
2.2 为什么使用 Set？
- 唯一性 (Uniqueness)：一个组件或计算属性可能多次读取同一个数据。使用 Set 可以保证每个依赖只被记录一次，避免重复通知。
- 快速查找 (Fast Lookup)：Set 提供了快速的
add和has操作，方便添加和检查依赖。
2.3 代码示例 (简化版)
为了方便理解，我们用简化版的代码来模拟依赖收集的过程：
// 全局变量，用于存储当前激活的 Effect (组件或计算属性)
let activeEffect = null;
// 模拟依赖集合
class Dep {
constructor() {
this.effects = new Set(); // 使用 Set 存储依赖
}
depend() {
if (activeEffect) {
this.effects.add(activeEffect); // 添加依赖
activeEffect.deps.push(this); // 建立双向关联
}
}
notify() {
this.effects.forEach(effect => {
effect.update(); // 触发更新
});
}
}
// 模拟 Effect (组件或计算属性)
class ReactiveEffect {
constructor(fn) {
this.fn = fn;
this.deps = []; // 存储依赖列表
}
run() {
activeEffect = this; // 设置当前激活的 Effect
this.fn(); // 执行函数，触发 Getter，收集依赖
activeEffect = null; // 清空当前激活的 Effect
}
update() {
console.log('更新了！');
this.run(); // 重新执行
}
}
// 模拟响应式数据
function reactive(data) {
const dep = new Dep();
return new Proxy(data, {
get(target, key) {
dep.depend(); // 依赖收集
return target[key];
},
set(target, key, value) {
target[key] = value;
dep.notify(); // 派发更新
return true;
}
});
}
// 使用示例
const data = reactive({ count: 0 });
const effect = new ReactiveEffect(() => {
console.log('count:', data.count);
});
effect.run(); // 首次执行，收集依赖
data.count = 1; // 修改数据，触发更新
data.count = 1; // 再次修改，不会重复触发更新在这个例子中：
Dep类模拟了依赖集合，内部使用Set来存储依赖。ReactiveEffect类模拟了组件或计算属性，run方法用于执行函数并收集依赖，update方法用于触发更新。reactive函数模拟了响应式数据的创建，通过Proxy拦截数据的读取和修改操作。
可以看到，Set 在 Dep 类中扮演了关键角色，保证了依赖的唯一性和快速查找。
3. 派发更新：Map 的身影
派发更新是指当响应式数据被修改时，通知所有依赖于该数据的组件或计算属性进行更新。 Map，在这一步中扮演了重要角色，尤其是在Vue 3中。
3.1 派发更新的流程
- 数据修改触发 Setter：当响应式数据被修改时，会触发该数据的 Setter 函数 (通过
Object.defineProperty或Proxy定义)。 - 通知依赖：在 Setter 函数中，Vue 会遍历该数据的依赖集合 (Set)，并依次触发每个依赖的更新函数。
- 组件更新：收到通知的组件会重新渲染，从而实现页面的自动更新。
3.2 Map 的作用 (Vue 3)
在 Vue 3 中，Map 用于更高效地管理和组织依赖关系。具体来说，它被用来存储 target (被观察的对象) 和 key (对象的属性) 与对应的依赖集合 (Dep) 之间的映射关系。
-
Target-Key-Dep 结构：Vue 3 使用 Map 来构建一个三层结构：
- WeakMap<Target, Map<Key, Dep>>
- 最外层是一个 WeakMap，Key 是被观察的对象 (target)，Value 是一个 Map。
- 中间层是一个 Map，Key 是对象的属性 (key)，Value 是一个 Dep 实例 (依赖集合)。
- 最内层是一个 Dep 实例，用于存储依赖该属性的所有 Effect。
-
高效查找：通过 Map，Vue 3 可以快速地根据 Target 和 Key 找到对应的依赖集合，从而更高效地进行派发更新。
3.3 为什么使用 Map？
- 更细粒度的依赖管理：Map 允许 Vue 3 对每个对象的每个属性进行独立的依赖管理，从而实现更细粒度的更新。
- 避免全局依赖污染：使用 Map 可以避免将所有依赖都存储在一个全局的依赖列表中，从而减少了全局依赖污染的风险。
- 更好的性能：通过 Map 的快速查找能力，Vue 3 可以更高效地进行派发更新，从而提升性能。
3.4 代码示例 (Vue 3 简化版)
// 全局变量，用于存储 Target-Key-Dep 映射关系
const targetMap = new WeakMap();
// 模拟依赖集合
class Dep {
constructor() {
this.effects = new Set(); // 使用 Set 存储依赖
}
depend() {
if (activeEffect) {
this.effects.add(activeEffect); // 添加依赖
activeEffect.deps.push(this); // 建立双向关联
}
}
notify() {
this.effects.forEach(effect => {
effect.update(); // 触发更新
});
}
}
// 模拟 Effect (组件或计算属性)
class ReactiveEffect {
constructor(fn) {
this.fn = fn;
this.deps = []; // 存储依赖列表
}
run() {
activeEffect = this; // 设置当前激活的 Effect
this.fn(); // 执行函数，触发 Getter，收集依赖
activeEffect = null; // 清空当前激活的 Effect
}
update() {
console.log('更新了！');
this.run(); // 重新执行
}
}
// 获取或创建 Target 的依赖 Map
function getTargetMap(target) {
let depsMap = targetMap.get(target);
if (!depsMap) {
depsMap = new Map();
targetMap.set(target, depsMap);
}
return depsMap;
}
// 获取或创建 Key 的 Dep
function getDepFromMap(depsMap, key) {
let dep = depsMap.get(key);
if (!dep) {
dep = new Dep();
depsMap.set(key, dep);
}
return dep;
}
// 模拟响应式数据
function reactive(data) {
return new Proxy(data, {
get(target, key) {
// 获取 Target 的依赖 Map
const depsMap = getTargetMap(target);
// 获取 Key 的 Dep
const dep = getDepFromMap(depsMap, key);
dep.depend(); // 依赖收集
return target[key];
},
set(target, key, value) {
target[key] = value;
// 获取 Target 的依赖 Map
const depsMap = getTargetMap(target);
// 获取 Key 的 Dep
const dep = getDepFromMap(depsMap, key);
dep.notify(); // 派发更新
return true;
}
});
}
// 使用示例
const data = reactive({ count: 0, name: 'Vue' });
const effect1 = new ReactiveEffect(() => {
console.log('count:', data.count);
});
const effect2 = new ReactiveEffect(() => {
console.log('name:', data.name);
});
effect1.run(); // 首次执行，收集依赖
effect2.run(); // 首次执行，收集依赖
data.count = 1; // 修改数据，触发 effect1 更新
data.name = 'Vue 3'; // 修改数据，触发 effect2 更新在这个例子中：
targetMap是一个WeakMap，用于存储 Target 和 Key 的依赖关系。getTargetMap函数用于获取或创建 Target 的依赖 Map。getDepFromMap函数用于获取或创建 Key 的 Dep。
可以看到，Map 在 Vue 3 的响应式系统中扮演了更重要的角色，实现了更细粒度的依赖管理和更高效的派发更新。
4. Set 和 Map 的总结
| 数据结构 | 作用 | 优点 | 使用场景 |
|---|---|---|---|
| Set | 存储依赖集合，保证依赖的唯一性。 | 唯一性：避免重复通知。快速查找：方便添加和检查依赖。 | 存储组件或计算属性对某个响应式数据的依赖关系。 |
| Map | 在 Vue 3 中，用于构建 Target-Key-Dep 结构，更高效地管理和组织依赖关系。 | 更细粒度的依赖管理：对每个对象的每个属性进行独立的依赖管理。避免全局依赖污染：减少全局依赖污染的风险。更好的性能：通过快速查找能力，更高效地进行派发更新。 | 存储被观察对象 (Target) 和属性 (Key) 与对应的依赖集合 (Dep) 之间的映射关系。 |
5. 额外思考
- WeakMap 的作用：为什么 Vue 3 使用 WeakMap 来存储 Target 和依赖 Map 之间的关系？ 这是因为 WeakMap 对 Key 是弱引用，这意味着当 Target 对象不再被使用时，WeakMap 会自动释放相关的内存，避免内存泄漏。
- 依赖追踪的优化：Vue 的响应式系统一直在不断优化，例如通过静态分析等技术来减少不必要的依赖追踪，从而提升性能。
6. 总结
今天咱们聊了 Vue 响应式系统中的依赖收集和派发更新，以及 Set 和 Map 在其中的作用。 希望通过今天的分享，大家能够对 Vue 的响应式系统有更深入的理解。
记住，Set 保证了依赖的唯一性，Map 实现了更细粒度的依赖管理。 它们就像幕后英雄，默默地支撑着 Vue 的响应式系统，让我们的页面能够自动更新。
好了，今天的讲座就到这里，谢谢大家！ 下课！ （扔粉笔，溜了溜了…）