WeakMap适合子应用内部隔离，因其在JS沙箱中为各子应用提供独立实例，键仅限对象且天然防冲突，卸载时依赖弱引用自动GC回收，避免内存泄漏与跨应用污染。
WeakMap 本身不能穿透微前端沙箱，但它可以在每个子应用**内部**安全地隔离对象状态，避免跨应用污染和内存泄漏。关键不是用 WeakMap 做跨应用共享，而是利用它的“弱引用 + 实例私有”特性，在沙箱内为各自环境建立独立、自动清理的元数据映射。
为什么 WeakMap 适合子应用内部隔离
micro-app 的 JS 沙箱（如 with 沙箱或 proxy 沙箱）会为每个子应用创建独立的执行上下文：window、document、全局变量均被代理或重绑定。这意味着：
- 每个子应用拥有自己独立的 WeakMap 实例，彼此不互通；
- WeakMap 的键必须是对象，且只在该实例内有效 —— 天然避免键名冲突；
- 当子应用卸载、DOM 元素被移除、组件实例销毁时，只要没有其他强引用，WeakMap 中对应的条目会随对象一起被 GC 回收，无需手动清理。
典型使用场景与写法
1. 为 DOM 元素附加沙箱内私有状态
例如子应用中需记录某个按钮是否被点击过，又不想挂载到 element.dataset（可能被其他脚本覆盖）或全局对象（可能跨应用误读）：
const buttonState = new WeakMap();<br>const btn = document.querySelector('#submit-btn');<br>buttonState.set(btn, { clicked: false, count: 0 });<br><br>// 后续操作中<br>if (buttonState.has(btn)) {<br> const state = buttonState.get(btn);<br> state.clicked = true;<br> state.count++;<br>}
立即学习“前端免费学习笔记（深入）”；
当 btn 被从 DOM 移除且子应用 A 卸载后，该状态自动消失，不残留内存。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
2. 封装子应用专属的私有配置或缓存
比如子应用 B 需对某类业务对象做昂贵计算并缓存结果，但不希望影响主应用或其他子应用：
const computeCache = new WeakMap();<br>function computeExpensive(obj) {<br> if (computeCache.has(obj)) return computeCache.get(obj);<br> const result = heavyTransform(obj);<br> computeCache.set(obj, result);<br> return result;<br>}
obj 若在子应用 B 中被销毁（如组件 unmount），缓存条目随之释放 —— 不依赖 componentWillUnmount 或 dispose 手动调用。
不能做什么：常见误区提醒
WeakMap 不解决跨子应用通信问题，也不绕过沙箱限制：
- ❌ 不要试图把 WeakMap 实例挂到 window 上（如
window.appBCache = new WeakMap()），沙箱会劫持 window，子应用读写的仍是代理副本； - ❌ 不要用 WeakMap 替代主应用暴露的全局通信机制（如
window.microAppGlobal）； - ❌ 不要期望在子应用 A 中 set 的对象，能在子应用 B 中用同一个 WeakMap 实例 get 到 —— 它们根本不是同一个 WeakMap。
配合沙箱的最佳实践
若需子应用间协同，应分层设计：
- 应用内状态 → 用 WeakMap 管理（安全、自动回收）；
- 跨应用通信 → 通过主应用统一暴露的未劫持对象（如
window.__MICRO_APP_ENV__）配合 Symbol.for 作键名； - 共享逻辑/工具函数 → 提取为独立 UMD 包，由主应用加载后透传给各子应用，避免重复打包和全局污染。
