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)
