WeakMap 适合绑定 DOM 生命周期，因其键为弱引用对象，DOM 元素被移除且无其他强引用时可自动 GC，对应条目随之失效，无需手动清理或监听事件，避免内存泄漏与属性污染。
WeakMap 为什么适合绑定 DOM 生命周期
WeakMap 的键必须是对象，且对键的引用是弱引用——DOM 元素被移除时，只要没有其他强引用，它就能被 GC 回收，同时 WeakMap 中对应的条目自动失效。这正好匹配 DOM 节点的生命周期：你不需要手动清理，也不用监听 DOMNodeRemoved（已废弃）或 MutationObserver 做兜底。
对比 Map 或对象属性（如 el.__privateData），WeakMap 不会阻止 GC，也不会污染 DOM 元素自身属性空间，更不会因反复挂载/卸载导致内存泄漏。
用 WeakMap 构建私有数据代理的最小可行结构
核心思路是：把 WeakMap 当作“外部私有存储桶”，所有读写都通过一个统一代理函数或类封装，避免直接暴露 WeakMap 实例。
- 不要把 WeakMap 实例挂到全局或模块顶层后随意导出——容易被误用或覆盖
- 推荐封装成单例类或闭包工厂，确保实例唯一且不可篡改
- 每个 DOM 元素只能对应一份私有数据，但数据结构可以任意（
Object、Map、class实例等）
示例（ES Module 封装）：
const privateStore = new WeakMap();
export function getPrivateData(el) {
if (!privateStore.has(el)) {
privateStore.set(el, {});
}
return privateStore.get(el);
}
export function setPrivateData(el, key, value) {
const data = getPrivateData(el);
data[key] = value;
}
这样调用：setPrivateData(button, 'clickCount', 0)，getPrivateData(button).clickCount++。
避免踩坑：WeakMap 不能用于非对象键和序列化场景
WeakMap 的键只能是对象（包括 DOM 元素、Element、DocumentFragment 等），传入 string、number 或 null 会直接报错：TypeError: Invalid value used as weak map key。
- 别试图用字符串 ID 替代元素本身做键——那就失去“自动解绑”能力
- WeakMap 内容无法被
JSON.stringify序列化，也不能被structuredClone拷贝（会丢弃） - 服务端渲染（SSR）中 DOM 不存在，
getPrivateData(document.createElement('div'))生成的节点若未插入文档，仍可工作；但若用的是 JSDOM 环境，需确认其 Element 实现支持 WeakMap 键
进阶：配合 Custom Element 或 React 组件做自动清理
在自定义元素中，connectedCallback 和 disconnectedCallback 是天然钩子，但 WeakMap 本身无需手动清理——不过你可以利用它做“懒初始化”或“状态快照”。
例如，在 disconnectedCallback 中触发一次数据归档逻辑（仅当需要持久化时）：
class MyWidget extends HTMLElement {
static #store = new WeakMap();
get #data() {
if (!MyWidget.#store.has(this)) {
MyWidget.#store.set(this, { createdAt: Date.now(), cache: new Map() });
}
return MyWidget.#store.get(this);
}
disconnectedCallback() {
// 只读取，不删除 —— WeakMap 自动处理
console.log('unmounting with', this.#data.cache.size, 'cached items');
}
}
React 场景下，可在 useEffect 清理函数中调用 getPrivateData(el) 读取并上报指标，但切勿在清理函数里尝试 WeakMap.delete() ——既没必要，也删不掉（你拿不到原始键引用）。
真正容易被忽略的一点：WeakMap 不是“事件监听器替代品”。它只管数据存在性，不响应 DOM 结构变化。如果业务需要“元素被移动到另一个父节点时重置状态”，得额外结合 TreeWalker 或 parentElement 对比判断——WeakMap 本身不提供这类语义。
