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 拦截无效。它们的操作语义也完全不同：

• map.get(key) 不是读取属性，而是查找键值对；
• set.has(value) 是成员判断，不是属性访问；
• map.keys() 返回迭代器，背后依赖整个 Map 的结构变化。

若强行走 Object 流程，会丢失 key 级别或迭代级别的响应性，导致 v-for 渲染 Map 后无法响应新增/删除项。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

关键响应行为怎么触发更新

Vue 3 把 Map/Set 的响应分三类场景，对应不同 trigger key：

• 读取单个值（如 map.get(k)、set.has(v)）→ track k 或 v 本身作为 key；
• 遍历操作（如 map.keys()、[...map]、v-for="(v, k) of map"）→ track ITERATE_KEY；
• 结构变更（如 map.set(k, v)、set.add(v)、map.clear()）→ 同时 trigger ITERATE_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.iterator track，但实际影响不大，Vue 已优化）。

不复杂但容易忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！