Vue 3 通过 CollectionHandlers 代理 Map/Set，拦截其原生方法实现细粒度响应式，不重写数据结构而只增强操作行为，精准追踪键值与迭代依赖。
Vue 3 的响应式系统对 Map 和 Set 的支持，并不是简单地把它们变成 reactive 对象，而是通过专门的 CollectionHandlers 拦截其原生方法，实现细粒度、语义准确的依赖追踪与触发。核心在于：不重写数据结构，只增强操作行为。
CollectionHandlers 是什么
它是 Vue 3 响应式模块中一组独立于 ObjectHandlers 和 ArrayHandlers 的代理处理器，专为 Map、WeakMap、Set、WeakSet 设计。它不把 Map/Set 当作普通对象处理，而是精准拦截 set、get、delete、has、clear、add、remove 等方法，在执行前后插入依赖收集（track）和更新通知（trigger）逻辑。
比如调用 map.set('a', 1)，CollectionHandlers 会：
- 先用
track记录当前 active effect 对ITERATE_KEY（迭代标识）和MAP_KEY_ITERATE_KEY（Map 键遍历标识）的依赖； - 再真正执行原生
set； - 最后用
trigger通知所有监听ITERATE_KEY或具体键'a'的 effect 重新运行。
为什么不能用 ObjectHandlers 处理 Map/Set
因为 Map 和 Set 是不可枚举的内置对象，没有原型链上的可代理属性，直接用 Reflect.get/set 拦截无效。它们的操作语义也完全不同：
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
-
map.get(key)不是读取属性，而是查找键值对； -
set.has(value)是成员判断，不是属性访问； -
map.keys()返回迭代器，背后依赖整个 Map 的结构变化。
若强行走 Object 流程，会丢失 key 级别或迭代级别的响应性，导致 v-for 渲染 Map 后无法响应新增/删除项。
关键响应行为怎么触发更新
Vue 3 把 Map/Set 的响应分三类场景，对应不同 trigger key：
-
读取单个值（如
map.get(k)、set.has(v)）→ trackk或v本身作为 key； -
遍历操作（如
map.keys()、[...map]、v-for="(v, k) of map"）→ trackITERATE_KEY； -
结构变更（如
map.set(k, v)、set.add(v)、map.clear()）→ 同时 triggerITERATE_KEY和涉及的具体 key（如k或v）。
这样既保证 v-for 能响应整体变化，又支持 computed(() => map.get('x')) 精准响应单 key 更新。
使用时要注意什么
CollectionHandlers 很强大，但有几点容易踩坑：
-
reactive(new Map())才生效，ref(new Map())只是浅层响应（ref 包裹后修改 .value 才触发，内部操作仍响应）； - 不要解构 Map/Set 方法，比如
const { set } = reactiveMap，会丢失 this 绑定和 proxy 拦截； - WeakMap/WeakSet 不支持响应式，Vue 3 直接跳过代理（它们无法被遍历，也不适合做响应式状态）；
- 在
effect中遍历 Map 时，建议用map.entries()而非for...of map（后者可能触发额外的Symbol.iteratortrack，但实际影响不大，Vue 已优化）。
不复杂但容易忽略。
