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 或独立模块导出）
• 示例：

<script setup><br>import { onMounted, onBeforeUnmount } from '<a style="color:#f60; text-decoration:underline;" title= "vue"href="https://m.php.cn/zt/15721.html" target="_blank">vue'<br>import EventBus from '@/utils/EventBus' // 如 mitt()<br><br>const handleCustomEvent = (payload) => {<br> console.log('收到事件:', payload)<br>}<br><br>onMounted(() => {<br> EventBus.on('data-updated', handleCustomEvent)<br>})<br><br>onBeforeUnmount(() => {<br> EventBus.off('data-updated', handleCustomEvent)<br>})<br></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></keep-alive> 包裹时，onMounted/onUnmounted 只触发一次，但组件可能多次激活/停用。此时需区分场景：

• 全局广播类事件（如登录态变更）仍应在 onMounted/onBeforeUnmount 中监听/解绑——生命周期只走一次，逻辑也只需一次
• 若需响应每次“显示/隐藏”，改用 onActivated/onDeactivated，但注意：它们不适用于事件总线解绑，因为总线监听本身不随激活状态变化；更适合做数据刷新或定时器启停

? 更健壮的替代方案：用组合式函数封装

为避免每个组件都手动写 on/off，推荐封装一个可复用的 useEventBus：

• 接收事件名、处理函数、可选总线实例
• 内部自动在 onMounted 绑定、onBeforeUnmount 解绑
• 返回取消函数，支持提前解绑（如条件切换时）
• 比手写更少出错，也便于统一日志或调试

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！