WeakMap 在 Vue3 中用于安全缓存原始对象与 Proxy 代理的映射，键为弱引用对象，确保组件卸载后自动回收内存，避免泄漏；其作为响应式系统外层索引，支撑 target→key→effects 的三层依赖结构。
WeakMap 在 Vue3 响应式系统里，核心作用是安全缓存响应式代理对象，并自动配合垃圾回收释放内存。它不是普通缓存工具，而是 Vue 实现“不泄漏、不残留、不手动清理”的关键基础设施。
WeakMap 存什么？为什么必须用它？
Vue3 用 WeakMap 缓存已处理过的原始对象（target）与其对应的 Proxy 代理实例之间的映射关系：
- 键（key）是原始响应式目标对象（比如
{ count: 0 }），且只能是对象 - 值（value）是该对象的响应式代理（
Proxy实例） - 当同一对象多次调用
reactive()，WeakMap 可快速命中并复用已有代理，避免重复代理和无限递归
真正关键：弱引用让内存管理“静默生效”
WeakMap 的键是弱引用——这意味它不参与 JavaScript 的可达性判定。只要原始对象在其他地方失去所有强引用（例如组件卸载、变量置为 null），即使 WeakMap 还“记着它”，GC 也会立即回收该对象及其在 WeakMap 中的条目。
- 对比普通
Map：若用 Map 缓存，即使组件销毁，Map 仍强持有 target，导致对象无法回收 → 内存泄漏 - WeakMap 不阻止回收：DOM 元素被移除、组件实例被销毁后，相关响应式状态自动消失，无需
onUnmounted手动清理缓存
它和依赖收集（target → key → effects）是什么关系？
WeakMap 是响应式系统的“第一层索引”。Vue 内部实际采用嵌套结构：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
立即学习“前端免费学习笔记（深入）”；
- 外层：
const targetMap = new WeakMap()→ 映射 对象 → 属性依赖表 - 中层：
const depsMap = new Map()→ 映射 属性名 → effect 集合 - 内层：
const effects = new Set()→ 存储依赖该属性的所有副作用函数
这个三层结构中，只有最外层用 WeakMap；中间的 Map 和 Set 都是强引用，但它们的生命周期由外层 WeakMap 的存活决定——一旦外层 key 被 GC 回收，整条链自然断开，不会滞留。
它如何防止循环引用死循环？
WeakMap 本身不直接解决循环引用，但它为 traverse() 等深度遍历提供了基础保障。Vue 在递归响应化时会配合 WeakSet 记录已访问对象：
-
WeakSet用于临时标记遍历路径中的对象，避免重复进入同一对象造成栈溢出 - 而 WeakMap 则确保：即使遍历中生成了大量代理，只要原始对象被释放，所有关联代理与依赖都会被一并清理
