Vue 3 中事件总线监听需在 onMounted 中注册、onBeforeUnmount 中解绑，使用具名函数确保引用一致；keep-alive 下按场景选择生命周期；推荐封装 useEventBus 组合式函数提升健壮性。
在 Vue 3 中管理事件总线（Event Bus）的监听与解绑，核心是“监听在组件挂载后建立，解绑在组件卸载前完成”，且必须保证函数引用一致、时机准确，否则容易导致重复监听、内存泄漏或报错。
✅ 正确绑定：用 onMounted 注册监听
事件总线监听不能放在 setup 顶层或 onCreated（Vue 3 已移除该钩子），而应放在 onMounted 中——此时组件实例已就绪，响应式系统可用，也能安全访问 methods 或具名处理函数。
- 监听函数必须是具名函数或
ref/const定义的稳定引用，避免使用内联箭头函数（会导致每次创建新引用，无法精准解绑） - 若使用自定义事件总线（如 mitt 或空 Vue 实例），确保总线实例已在全局可访问（例如通过
app.config.globalProperties或独立模块导出） - 示例：
import { onMounted, onBeforeUnmount } from 'vue'
import EventBus from '@/utils/EventBus' // 如 mitt()
const handleCustomEvent = (payload) => {
console.log('收到事件:', payload)
}
onMounted(() => {
EventBus.on('data-updated', handleCustomEvent)
})
onBeforeUnmount(() => {
EventBus.off('data-updated', handleCustomEvent)
})
</script>
⚠️ 必须解绑：用 onBeforeUnmount 移除监听
解绑不能等到 onUnmounted，因为此时组件实例可能已被销毁，this 或响应式状态不可靠；onBeforeUnmount 是最后一个能安全调用 off 的时机。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
- 必须与
on使用完全相同的事件名和函数引用，否则off无效 - 不要在
onActivated或watch中重复注册同一监听，否则会叠加触发 - 若事件总线支持批量解绑（如
EventBus.all.clear()），慎用——它会清除所有监听，影响其他组件
? 配合 keep-alive 场景的特殊处理
当组件被 <keep-alive> 包裹时，onMounted/onUnmounted 只触发一次，但组件可能多次激活/停用。此时需区分场景：
立即学习“前端免费学习笔记（深入）”；
- 全局广播类事件（如登录态变更）仍应在
onMounted/onBeforeUnmount中监听/解绑——生命周期只走一次，逻辑也只需一次 - 若需响应每次“显示/隐藏”，改用
onActivated/onDeactivated，但注意：它们不适用于事件总线解绑，因为总线监听本身不随激活状态变化；更适合做数据刷新或定时器启停
? 更健壮的替代方案：用组合式函数封装
为避免每个组件都手动写 on/off，推荐封装一个可复用的 useEventBus：
- 接收事件名、处理函数、可选总线实例
- 内部自动在
onMounted绑定、onBeforeUnmount解绑 - 返回取消函数，支持提前解绑（如条件切换时）
- 比手写更少出错，也便于统一日志或调试
