vue 3 移除 event bus 是为推动显式、可追踪、类型安全的通信方式；推荐用 mitt 替代，其体积仅约 200 字节，支持通配符和自动清理，适合弹窗通知等临时跨组件交互。
Event Bus 在 Vue 2 中曾是常用的跨组件通信方式，但 Vue 3 已移除对全局事件总线的原生支持，且它本身存在维护性差、调试困难、内存泄漏风险高等问题。现在更推荐使用语义清晰、可追踪、易测试的替代方案。
Event Bus 的核心问题
它本质是用一个空 Vue 实例（Vue 2）或 mitt / tiny-emitter（Vue 3）充当中央事件中心，任意组件可 emit 和 on。但实际项目中容易导致：
-
事件名随意、无约束：比如
user-updated和userUpdate混用，类型不统一，IDE 无法提示 -
监听未被清理：组件卸载时忘记
off或removeEventListener，造成重复触发和内存泄漏 - 调试困难：事件从哪发、谁在听、是否被拦截，无法通过 Devtools 追踪源头
- 破坏响应式链路：绕过 props/emits/data 流，使数据流向不可预测
Vue 3 推荐的替代方案
根据通信范围和场景选择合适方式，优先保证类型安全与可维护性：
-
父子通信 → props + emits：最基础也最可靠。父传子用
props，子传父用emit，配合defineEmits声明事件，TypeScript 可自动校验 -
祖孙/深层嵌套 → provide/inject：适合配置、主题、全局状态等“只读”或“受控更新”的场景。建议
provide时用readonly包裹响应式对象，避免子组件意外修改 -
兄弟/无关组件 → 状态管理或事件解耦：
- 简单共享状态：用
ref或computed创建独立响应式变量，配合watch触发副作用 - 中等复杂度：Pinia（官方推荐）——模块化、TS 友好、支持插件扩展，且 Devtools 支持时间旅行调试
- 需强事件语义（如通知、广播）：用
mitt（轻量）或tiny-emitter替代旧 Event Bus，但务必在onUnmounted中手动清除监听
- 简单共享状态：用
如何安全地用 mitt 做轻量事件解耦
如果确实需要松耦合事件（如全局通知、日志上报），mitt 是比手写 Event Bus 更可控的选择：
- 创建统一事件中心：
const emitter = mitt()放在独立文件（如eventBus.ts） - 发送事件：
emitter.emit('auth/logout', { reason: 'timeout' }) - 监听事件（必须配销毁）：
onMounted(() => { emitter.on('auth/logout', handleLogout) }) onUnmounted(() => { emitter.off('auth/logout', handleLogout) }) - 避免通配符监听（
emitter.on('*', ...)），防止性能和可维护性恶化
什么时候仍可考虑类 Event Bus 方案
仅限以下低风险、临时性场景：
- 原型开发阶段快速验证逻辑，后续会迁移到 Pinia 或 provide/inject
- 微前端子应用间极简信号同步（如主应用通知子应用刷新用户信息），且双方约定严格命名与生命周期
- 非响应式的一次性消息（如错误上报、埋点日志），不依赖响应更新 UI
真正需要长期维护的项目，应把通信契约显式化——无论是通过接口定义、store action 还是组合式函数，都比隐式事件更可持续。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
