vue 3 通过 reactivemap/reactiveset 包装类重写方法实现 map/set 响应式，需调用 set/add 等原生方法触发更新，禁用 map[key]=val 等属性赋值；遍历用 v-for="[k,v] of map"，调试用 toraw。

Vue 3 的响应式系统能直接处理 Map 和 Set，但不是靠简单代理实例，而是通过“包装类 + 方法劫持”实现精准响应——你照常写 map.set() 或 set.add()，更新就自动发生，前提是用对方式。

Map 的响应式机制与正确用法

Vue 不会对原生 Map 实例做裸 Proxy，而是创建一个继承自 Map 的 ReactiveMap 类，重写 set、delete、clear 等方法，在调用前后分别触发依赖收集和更新通知。

• 读取操作如 map.get(key)、map.has(key)、map.keys() 都会被增强，确保对应 key 或整体状态（如 size）的依赖被正确追踪
• 模板中遍历推荐写法：v-for="[key, value] of map" :key="key"，避免因迭代器不稳定导致重复渲染
• 禁止写 map[key] = value 或 map.size = 0，这些绕过原型方法的操作完全不触发响应

Set 的响应式机制与正确用法

Set 的处理逻辑与 Map 高度对称：派生出 ReactiveSet 类，重写 add、delete、clear，并在 forEach、values() 等遍历方法中插入依赖追踪逻辑。

vue-component-analyzer

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

下载

• set.add(item) 会同时 track "size" 和该 item 本身（若 item 是 reactive 对象，还会递归收集其内部依赖）
• 重复添加同一值（Object.is 判定）不会触发多余更新，Vue 内部已做 has 预检
• 注意：Set 只响应自身结构变化（增/删/清空），不监听成员对象的属性变更。例如向 set 添加 reactive({ count: 1 })，后续修改 count 不会让 set 触发更新

为什么不能直接 Proxy Map/Set？

根本原因在于 Map/Set 的内部存储是私有的（[[MapData]]），且关键操作（如 set()、add()）定义在原型上，Proxy 的 get/set 拦截无法捕获方法调用本身。

• 如果只代理 size 属性，它只是 getter，无法感知 set() 执行带来的真实数据变化
• 想让 map.get('a') 触发对 'a' 的依赖收集，就必须劫持 get 方法本身，而不是拦截属性访问
• 所以 Vue 选择“替换原型方法 + 包装实例”的路径，既保持 API 兼容，又保障响应精确性

实战建议与避坑点

日常开发中，只要记住操作入口必须是原生方法，其他都水到渠成。

• 声明时直接用 reactive(new Map()) 或 ref(new Set())，无需额外封装
• 批量更新建议先操作再触发，比如清空后重新 set 多个键值对，比逐个 delete + set 更高效
• 调试时可用 toRaw(map) 查看原始实例，确认是否已被 ReactiveMap 包装
• 不要尝试用 JSON.stringify(map) 做深拷贝，应改用 new Map(map) 或 Array.from(map)

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