组件通信 事件总线销毁如何在组件卸载时正确注销全局事件总线防止内存泄漏

组件卸载时未注销事件总线会导致内存泄漏，因监听器闭包持续引用组件实例；Vue 不管理自定义 eventBus 生命周期，必须手动 $off；推荐用 mitt 的 on() 返回的 off() 函数在 onUnmounted 中精准解绑，或改用 provide/inject、Pinia 订阅。

组件卸载时未注销事件总线，是内存泄漏的典型源头——它会让整个组件实例被监听器闭包持续引用，无法被垃圾回收。

为什么 eventBus 注册后必须手动 $off？

Vue 本身不管理自定义事件总线（如 mitt、tiny-emitter 或手写的 Vue.prototype.$bus）的生命周期。一旦用 $on 绑定监听器，回调函数就形成闭包，隐式持有组件上下文（比如 this、ref、setup 中的变量）。只要没调用 $off，这个引用链就一直存在。

即使组件从 DOM 移除、响应式依赖被清理，eventBus 里仍存着指向已销毁组件的函数，导致内存无法释放。

正确注销方式：保存 off 函数并统一在 onUnmounted 中执行

mitt 等轻量库的 on() 方法会返回一个 off() 函数，这是唯一安全、精准的解绑方式：

1. 在 setup 中用 ref 缓存 off 函数：const off = ref(null)
2. 注册时赋值：off.value = emitter.on('user:update', handler)
3. 在 onUnmounted 中调用：off.value?.()

不要用 emitter.off('user:update', handler) —— 这要求传入完全相同的函数引用，而箭头函数或每次渲染新建的函数会导致匹配失败，解绑失效。

替代方案：优先改用 provide / inject 或 Pinia 订阅

事件总线本质是全局强引用，容易失控。更健壮的通信方式包括：

1. provide / inject：父子/祖孙通信，天然受组件生命周期约束，无需手动清理
2. Pinia store 的 actions 或 $subscribe：状态变更通过 store 驱动，监听自动随组件卸载失效（尤其配合 store.$onAction 时）
3. 如果必须用 eventBus，建议封装成 useEventBus Composable，内部自动绑定 + 自动解绑，避免重复出错

额外注意：避免在总线回调中触发副作用泄漏

即使成功 $off，若监听器内部还启动了定时器、发起请求或创建 watch，这些新副作用仍需单独清理：

1. 监听器内用了 setTimeout？记得在 onUnmounted 中一并清除对应 timer
2. 监听器内调用了 watchEffect？保留其返回的 stop 函数并在卸载时调用
3. 监听器内发起了 fetch？搭配 AbortController，并在 onUnmounted 中 abort