全局事件总线未解绑是JS内存泄漏的典型原因，表现为Closure持续增长、闭包捕获组件实例等无法回收对象，需通过堆快照对比、内存曲线验证，并在组件卸载时配对解绑监听器。
全局事件总线（如 Vue 的 EventBus、自定义的 EventEmitter 实例或 window 上挂载的发布订阅对象）未解绑，是 JS 项目中最隐蔽也最典型的内存泄漏源头之一。它不报错、不卡顿，但每次组件重建或页面跳转后，监听器持续堆积，闭包里捕获的数据（比如整个组件实例、API 响应体、DOM 节点）全部无法回收。
看堆快照里 Closure 是否异常增长
在 Chrome DevTools 的 Memory 面板中：
- 点击「垃圾回收」图标强制触发 GC，再拍一张堆快照
- 执行一次可能触发监听注册的操作（例如打开一个弹窗、切换路由）
- 再次 GC + 拍第二张快照，切到 Comparison 视图
- 筛选 Constructor 为 Closure，重点关注 # New 列持续为正的条目
- 点开可疑 Closure，右侧查看它捕获了哪些变量——如果看到
vm、this.$data、response.data或大 Buffer，基本可确认是 EventBus 监听器拖住了它们
检查总线实例是否被长期持有且监听器未清理
全局总线泄漏的本质是：监听函数被注册进一个常驻对象（如 globalBus），而该函数闭包又引用了本该随组件销毁的上下文。排查时重点看：
- 总线是否是单例且全局可访问（比如
export const bus = new EventEmitter()） - 监听是否在组件
mounted/useEffect中注册，但没在unmounted/useEffect cleanup中调用off或removeListener - 是否用了匿名函数注册（
bus.on('x', () => {...})），导致无法精准移除 - 是否在类方法中直接传箭头函数（
bus.on('x', this.handle)），而this.handle是 class field 箭头函数，隐式绑定并捕获了整个this
快速验证：模拟高频注册+观察内存曲线
写一段临时测试代码，反复触发监听注册逻辑（比如每秒新建一个监听器）：
let count = 0;
const testLeak = () => {
globalBus.on('test', () => {
const big = new Array(100000).fill('leak');
console.log('leak #' + ++count);
});
};
setInterval(testLeak, 1000);运行 30 秒后，在 Performance 面板录制内存分配火焰图，或在 Memory 面板连续拍 3 张快照。若 Closure 数量线性上涨且 GC 后不回落，就是实锤。
修复关键动作：配对注册与解绑
不是“尽量解绑”，而是必须结构化解绑：
- Vue 2/3 组件中，在
beforeUnmount或onBeforeUnmount里显式调用bus.off('event', handler) - React 函数组件中，
useEffect返回的 cleanup 函数里执行移除，且 handler 必须是稳定引用（不用内联箭头函数） - 优先使用 AbortController 信号统一注销（Node.js 或现代浏览器支持）：
bus.on('x', handler, { signal }) - 避免把总线挂到
window或globalThis，改用模块级单例 + 显式生命周期管理
