WeakMap 适合托管组件定时器，因其键为弱引用对象，不阻止组件实例被垃圾回收；以组件实例为键、定时器ID数组为值，卸载时批量清除，兼顾自动回收与安全清理。
WeakMap 可以让定时器引用与组件实例绑定，又不阻止组件被垃圾回收——关键在于利用其键的弱引用特性，只存实例本身作键，定时器 ID 或句柄作值。
为什么 WeakMap 适合托管组件定时器
业务组件（如 React 函数组件、Vue 的 setup 组件）常在 useEffect/onMounted 中启动定时器，但容易因卸载时清理遗漏导致内存泄漏或报错。普通 Map 或对象字面量会强持有组件实例（比如用组件实例作为 key），阻碍 GC；而 WeakMap 的键必须是对象，且是弱引用——只要组件实例不再被其他地方引用，即使 WeakMap 中还存着它，也会被自动回收，定时器值也随之失效（虽然不会自动清除，但可配合清理逻辑安全处理）。
核心实现模式：实例为键，定时器信息为值
在组件初始化时，将当前实例（如 this、ref 对象、或一个空对象代理）作为 WeakMap 的键，把 setTimeout/setInterval 返回的 ID 或一个包含多个定时器的数组作为值。卸载前查 WeakMap 获取并清除。
- React 函数组件可用 useRef 创建唯一标识对象（非 DOM ref），作为 WeakMap 键
- Vue 3 中可对 setup 函数作用域内定义的空对象（const owner = {}）做键
- 值推荐存为数组（如 [timer1, timer2]），便于批量 clearTimeout/clearInterval
- 避免直接用函数组件自身闭包变量作键（无稳定引用），也不要用字符串 ID 模拟（失去自动回收优势）
一个轻量封装示例（通用逻辑）
定义一个全局 WeakMap 实例和两个辅助函数：
const timerStore = new WeakMap();
export function setTimer(target, timerId) {
if (!timerStore.has(target)) {
timerStore.set(target, []);
}
timerStore.get(target).push(timerId);
}
export function clearTimers(target) {
const timers = timerStore.get(target);
if (Array.isArray(timers)) {
timers.forEach(id => typeof id === 'number' ? clearTimeout(id) : clearInterval(id));
timerStore.delete(target); // 显式删除更清晰，虽非必须
}
}
在组件中使用：
- React：用 useRef({}) 创建 owner，useEffect 中 setTimer(owner, setTimeout(...))，return () => clearTimers(owner)
- Vue：setup 内定义 const owner = {}，onBeforeUnmount(() => clearTimers(owner))，启动定时器时 setTimer(owner, setInterval(...))
注意事项与边界情况
WeakMap 不支持遍历，也不能用非对象作键（所以不能用字符串 ID 替代实例）；它不解决“忘记调 clearTimers”的问题，但能确保即使漏清，也不会造成实例无法回收；若需调试，可在开发环境用 Map 替代 WeakMap 并打印内容，上线再切回 WeakMap；另外，定时器回调中若需访问已卸载组件状态，应额外判断（如 React 的 isMounted 模拟、Vue 的 isUnmounted），WeakMap 托管只解决引用生命周期，不替代状态有效性校验。
