单页应用中全局事件总线需严格配对绑定与解绑，谁绑定谁解绑，且必须在组件卸载前执行；匿名函数监听器无法精确解绑，应使用具名引用；推荐封装自动清理的订阅机制并用DevTools验证。
在单页应用（SPA）中，全局事件总线（如 Vue 2 的 EventBus、自定义的 mitt / tiny-emitter 实例，或基于 EventTarget 的中央调度器）若未及时解绑监听器，极易引发内存泄漏——尤其当组件销毁后，其回调函数仍被总线强引用，导致整个组件实例无法被 GC 回收。
明确监听器绑定与解绑的生命周期边界
关键原则：**谁绑定，谁负责解绑；绑定发生在组件挂载/激活时，解绑必须发生在组件卸载/失活前**。不能依赖“页面跳转自动清理”，因为 SPA 中组件常被复用或缓存（如 <keep-alive>），beforeDestroy 或 unmounted 并非总被触发。
- Vue 2：在
mounted中绑定，在beforeDestroy中调用off解绑 - Vue 3（Composition API）：在
onMounted绑定，在onBeforeUnmount解绑；若使用onActivated/onDeactivated，需配合keep-alive场景单独管理 - React：在
useEffect的清理函数中解绑，确保返回的函数执行时机与组件卸载一致
避免匿名函数导致无法精确解绑
传入总线的监听回调若为匿名函数（如 bus.on('msg', () => {...})），后续无法通过 off 精确移除——因为每次声明都是新函数引用。这会使监听器永久驻留。
- ✅ 正确做法：将回调定义为具名方法或组件内变量，确保绑定与解绑使用同一函数引用
- ❌ 错误示例：
bus.on('data', (v) => this.handleData(v))→ 解绑时bus.off('data', (v) => this.handleData(v))无效 - ✅ 推荐写法：
this.handleData = (v) => {...}; bus.on('data', this.handleData); ... bus.off('data', this.handleData)
利用组件级自动清理机制（推荐）
手动管理易遗漏。更健壮的方式是让总线感知组件生命周期，或封装带自动清理的订阅 API。
立即学习“Java免费学习笔记（深入）”；
- Vue 3 可封装
useEventBusHook，内部在onBeforeUnmount自动调用off - 自定义总线类可提供
subscribe(component, event, handler)方法，内部记录组件 ID 与 handler 映射，暴露unsubscribe(component)批量清理 - 使用
mitt时，可搭配mitt的all集合做弱引用管理，或用WeakMap关联组件实例与监听器列表
验证是否真正解绑：DevTools + 快照比对
仅靠逻辑推演不够。需用 Chrome DevTools 的 Memory 面板实证：
- 在路由跳转前后分别录制 Heap Snapshot
- 筛选关键词（如组件名、handler 函数名），查看对应对象是否仍被
EventBus的_all/_events引用链持有 - 检查 Detached DOM 节点是否意外保留 —— 若组件 DOM 已 detach 但 JS 对象仍存活，大概率是事件监听器未清除
不复杂但容易忽略：全局总线不是“设一次用 forever”的工具，它本质是跨组件通信的桥梁，而桥梁两端的连接必须可断开。把解绑当作和绑定同等重要的声明式步骤，内存泄漏风险就可控。
