各位观众，早上好！我是你们的老朋友，今天咱们聊聊 Vue 3 响应式系统的幕后英雄：Proxy 对 Map 和 Set 这类集合类型数据的“驯服”过程。 准备好了吗？咱们这就开始！
第一幕：开场白——集合类型数据的“叛逆”
在 Vue 2 时代，我们用 Object.defineProperty 对对象进行深度遍历，从而实现响应式。但这玩意儿对数组和对象来说，多少有点力不从心。而且，对新增属性、删除属性，以及数组的索引修改等操作，都需要手动 vm.$set 或者 vm.$delete，麻烦得要死。
Vue 3 祭出了 Proxy 大杀器，直接代理整个对象，无论新增、删除还是修改，统统逃不出它的手掌心。但 Proxy 对 Map 和 Set 这类集合类型数据，天然支持度不高。它们内部的方法，比如 map.set()、set.add()，直接操作的是集合内部的数据，Proxy 默认情况下是感知不到的。
所以，我们要做的，就是让 Proxy 也能拦截这些“叛逆”的集合操作，让它们乖乖地服从响应式的安排。
第二幕：主角登场——mutableHandlers 和 collectionHandlers
Vue 3 的响应式核心，在于创建响应式对象时使用的 mutableHandlers。它是一个 ProxyHandler 对象，定义了一系列拦截器 (trap)，负责监听和拦截对象的各种操作，比如 get、set、deleteProperty 等。
对于 Map 和 Set 这类集合类型，Vue 3 专门准备了 collectionHandlers。这个对象，同样是一组拦截器，但它们专门针对集合类型的方法进行了定制。
mutableHandlers （用于普通对象）和 collectionHandlers（用于 Map 和 Set）的主要区别在于它们拦截的操作类型和处理逻辑。 mutableHandlers 关注的是对象属性的读取、设置和删除，而 collectionHandlers 关注的是集合类型数据的添加、删除、查找和迭代。
第三幕：深入虎穴——collectionHandlers 的内部构造
咱们来看看 collectionHandlers 里面都有些什么宝贝。它主要拦截了以下集合类型的方法：
get：拦截Map和Set的原型方法，比如get、set、add、delete、has、clear、forEach等。has：拦截Map和Set的has方法，用于判断是否存在某个键或值。size：拦截Map和Set的size属性的读取。iterate：拦截Map和Set的迭代方法，比如keys、values、entries和[Symbol.iterator]()。
现在，我们来扒一扒 get 拦截器的实现。它的核心思想是：
- 拿到原始的集合方法。
- 对某些方法（比如
add、set、delete、clear）进行包装，在执行原始方法前后，触发依赖收集和触发更新。 - 返回包装后的方法。
// 简化后的 collectionHandlers 的 get 拦截器
const collectionHandlers: ProxyHandler<CollectionTypes> = {
get(target: CollectionTypes, key: string | symbol, receiver: object) {
// 1. 拿到原始方法
const rawTarget = toRaw(target); // 获取原始的 Map 或 Set 对象
const rawGetter = rawTarget[key]; // 获取原始的方法
// 2. 对某些方法进行包装
if (key === 'add' || key === 'set' || key === 'delete' || key === 'clear') {
return function(...args: any[]) {
// 执行原始方法前：触发依赖收集
const target = toRaw(this); // 获取当前 Map 或 Set 对象，确保是原始对象，避免无限递归
const hadKey = (key === 'set' || key === 'add') ? target.has(args[0]) : target.has(args[0]); // 检查是否已存在，用于判断是新增还是修改
const result = rawGetter.apply(target, args); // 执行原始方法
// 执行原始方法后：触发更新
trigger(
toRaw(target),
TrackOpTypes.ITERATE, //关键点：触发 ITERATE 类型的更新
key,
args
);
if (!hadKey && (key === 'set' || key === 'add')) {
trigger(
toRaw(target),
TrackOpTypes.ADD, //触发 ADD 类型的更新
key,
args
);
}
return result;
};
}
// 其他方法，直接返回原始方法
return rawGetter;
}
};
这里有几个关键点：
toRaw(target)：这个函数用于获取响应式对象的原始对象。目的是避免无限递归，因为在包装后的方法内部，如果直接操作响应式对象，可能会再次触发get拦截器，导致死循环。TrackOpTypes.ITERATE：触发ITERATE类型的更新，通知所有依赖这个Map或Set的副作用函数，数据发生了迭代相关的变化（比如新增、删除）。TrackOpTypes.ADD：触发ADD类型的更新，用于通知新增操作。trigger函数：这个函数负责触发更新。它会找到所有依赖这个Map或Set的副作用函数，并执行它们。
对于 has 方法，collectionHandlers 也会进行拦截，但它的目的不是触发更新，而是为了在 has 方法被调用时，也能够进行依赖收集。
const collectionHandlers: ProxyHandler<CollectionTypes> = {
get(target: CollectionTypes, key: string | symbol, receiver: object) {
// ... 上面的代码 ...
},
has() {
// 在 has 方法被调用时，也进行依赖收集
track(target, TrackOpTypes.HAS, key);
return rawTarget.has(key);
},
size(target: CollectionTypes) {
track(target, TrackOpTypes.SIZE, TrackOpTypes.SIZE);
return Reflect.get(target, key, receiver);
}
}这里，track 函数负责进行依赖收集。它会将当前激活的副作用函数（比如组件的渲染函数）添加到 Map 或 Set 的依赖列表中。
第四幕：实战演练——代码示例
咱们来写个简单的例子，看看 Proxy 和 collectionHandlers 是如何配合工作的。
<template>
<div>
<p>Map size: {{ mapSize }}</p>
<p>Set size: {{ setSize }}</p>
<ul>
<li v-for="(value, key) in map" :key="key">{{ key }}: {{ value }}</li>
</ul>
<button @click="addMapEntry">Add Map Entry</button>
<button @click="addSetValue">Add Set Value</button>
<button @click="clearMap">Clear Map</button>
</div>
</template>
<script>
import { reactive, computed } from 'vue';
export default {
setup() {
const state = reactive({
map: new Map(),
set: new Set()
});
const mapSize = computed(() => state.map.size);
const setSize = computed(() => state.set.size);
const addMapEntry = () => {
const key = Math.random().toString(36).substring(7);
const value = Math.random();
state.map.set(key, value);
};
const addSetValue = () => {
const value = Math.random();
state.set.add(value);
};
const clearMap = () => {
state.map.clear();
}
return {
map: state.map,
set: state.set,
mapSize,
setSize,
addMapEntry,
addSetValue,
clearMap
};
}
};
</script>在这个例子中，我们创建了一个响应式的 Map 和 Set。当我们点击按钮，修改 Map 或 Set 的内容时，mapSize 和 setSize 会自动更新，并且 v-for 渲染的列表也会随之变化。
这背后的功臣，就是 Proxy 和 collectionHandlers。它们拦截了 map.set() 和 set.add() 方法，并在方法执行前后触发了依赖收集和更新，从而实现了响应式。
第五幕：幕后花絮——WeakMap 和 WeakSet 的特殊待遇
WeakMap 和 WeakSet 这两个兄弟，比较特殊。因为它们的键或值是弱引用，这意味着垃圾回收器可以随时回收它们，而不需要等待它们被显式删除。
因此，对 WeakMap 和 WeakSet 进行响应式处理，意义不大。因为我们无法可靠地追踪它们的依赖关系。Vue 3 对它们采取了“放任自流”的态度，不对它们进行响应式代理。
第六幕：总结陈词——响应式的力量
通过 Proxy 和 collectionHandlers 的精妙配合，Vue 3 成功地驯服了 Map 和 Set 这类集合类型数据，让它们也能享受响应式的待遇。
这极大地提升了 Vue 3 的灵活性和适用性。我们可以放心地在 Vue 3 应用中使用 Map 和 Set，而不用担心响应式的问题。
第七幕：彩蛋——一些思考
-
为什么 Vue 3 要专门为
Map和Set提供collectionHandlers？直接用mutableHandlers拦截所有方法不行吗？答案是：不行。因为
Map和Set的某些方法（比如add、set）会直接修改集合内部的数据，而mutableHandlers默认情况下只能拦截对象属性的读取、设置和删除。 -
collectionHandlers是如何避免无限递归的？答案是：通过
toRaw()函数，获取原始对象。在包装后的方法内部，操作的是原始对象，而不是响应式对象，从而避免再次触发get拦截器。 -
TrackOpTypes.ITERATE的作用是什么？答案是：通知所有依赖这个
Map或Set的副作用函数，数据发生了迭代相关的变化（比如新增、删除）。这对于v-for渲染列表的场景非常重要。
好了，今天的讲座就到这里。希望大家对 Vue 3 的响应式系统有了更深入的了解。记住，响应式是 Vue 的灵魂，理解它，才能更好地驾驭 Vue！
如果大家还有什么问题，欢迎随时提问。下次再见！