Vue 3 中推荐使用 mitt 实现事件总线，因其轻量（200 字节）、零依赖、TypeScript 友好，且能安全适配 setup 的生命周期（onMounted/onBeforeUnmount 自动清理监听器），解决跨组件（含兄弟、非父子）通信问题。
Vue 3 的 setup 函数本身不支持 Vue 2 风格的全局事件总线（即基于 new Vue() 实例的 $on/$off），因为这些 API 已在 Vue 3 中被移除。但你仍可在组合式函数中实现类似“事件总线”的跨组件通信，关键是选用兼容 Vue 3 的轻量级事件发射器，并在 setup 中正确注册监听与清理逻辑。
用 mitt 或 tiny-emitter 替代 Vue 实例总线
推荐使用 mitt（最常用）或 tiny-emitter 创建一个纯 JavaScript 事件中心。它不依赖 Vue 实例，天然适配组合式 API：
- 安装：
npm install mitt - 创建事件总线文件（如
eventBus.js）：
import mitt from 'mitt';
export const eventBus = mitt(); - 在组合式函数中导入并使用：
监听事件需在onMounted中注册，移除监听必须在onBeforeUnmount中执行，避免内存泄漏。
在 setup 中安全监听事件（含自动清理）
直接在 setup 里调用 eventBus.on 是可行的，但必须手动绑定和解绑。更稳妥的方式是封装成可复用的组合式函数，例如：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 定义
useEventBus组合函数：
import { onMounted, onBeforeUnmount } from 'vue';
import { eventBus } from './eventBus';
export function useEventBus(event, callback) {
onMounted(() => eventBus.on(event, callback));
onBeforeUnmount(() => eventBus.off(event, callback));
} - 在组件中使用：
import { useEventBus } from './composables/useEventBus';
import { ref } from 'vue';
export default {
setup() {
const msg = ref('');
useEventBus('update-message', (data) => {
msg.value = data;
});
return { msg };
}
}
触发事件的位置不受限制
任何地方（包括其他组合式函数、setup、methods 或普通 JS 模块）都可以调用 eventBus.emit('xxx', payload) 发送事件，无需挂载或上下文依赖。例如：
立即学习“前端免费学习笔记（深入）”；
- 在某个按钮点击逻辑中：
import { eventBus } from './eventBus';
function handleClick() {
eventBus.emit('update-message', 'New content from button');
} - 该事件会立即被所有已注册的
useEventBus('update-message', ...)监听器响应。
为什么不用 provide/inject 替代？
provide/inject 适合**有明确祖先-后代关系**的组件通信；而事件总线适用于**无层级关联、松耦合、广播式**场景（如全局通知、跨路由模块通信）。两者定位不同，不可简单互换。若项目已引入 Pinia，多数全局状态变更建议走 store + actions，仅临时性、非状态类通知才考虑事件总线。
