Vue 3废弃全局事件总线因其隐式、无作用域的广播机制易致内存泄漏与调试困难；推荐mitt用于轻量临时通信，provide/inject适用于祖先-后代通信，Pinia管理全局状态。
Vue 全局事件总线曾是跨组件通信的常用手段，但它的设计本质是隐式、全局、无作用域约束的“广播机制”。Vue 3 彻底移除了 $on/$off/$once API，不是功能删减，而是明确反对这种难以追踪、易失控的通信方式。真正实用的方案，得看场景选——轻量临时通信用 mitt，祖先-后代用 provide/inject，复杂状态流转则交给 Pinia。
为什么事件总线容易出问题
它像一个没有频道管理的对讲机：任何组件都能随时喊话，也能随意收听。看似灵活，实则埋下隐患：
- 事件名拼错或重复注册时，监听器不会报错，只默默失效
- 组件卸载后忘记
off，监听函数仍驻留内存，引发内存泄漏 - 调试时无法从模板或 setup 中追溯事件来源，只能全局搜索字符串
- 多人协作中，没人知道某个
'data-updated'事件到底被谁发、被谁听、触发几次
mitt：Vue 3 官方认可的轻量替代
它不是 Vue 的复刻，而是一个专注事件分发的微型库（仅约 200 字节），API 简洁且自带清理机制：
- 安装：
npm install mitt - 统一入口（
utils/eventBus.js）：import mitt from 'mitt'; export const emitter = mitt(); - 发送方：
emitter.emit('user-login', { id: 1 }) - 接收方必须配对注册与销毁：
在onMounted中emitter.on('user-login', handler)，
在onUnmounted中emitter.off('user-login', handler) - 支持通配符
*和批量清除emitter.all.clear()，适合弹窗关闭、表单提交成功等一次性通知
provide / inject：有层级、可响应、类型安全
当通信发生在明确的祖先-后代链路中（比如布局组件向嵌套的工具栏、筛选器传数据），这是更自然的选择：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 祖先组件提供响应式数据或方法：
const searchKeyword = ref(''); provide('searchContext', { keyword: searchKeyword, update: (v) => searchKeyword.value = v }); - 任意深层子组件注入使用：
const { keyword, update } = inject('searchContext'); - 天然支持 TypeScript 类型推断，无需字符串匹配；响应式更新自动同步；作用域清晰，不会污染全局
Pinia：状态驱动的通信，而非事件驱动
如果多个组件需要共享并响应同一份状态（如用户登录态、主题色、购物车数量），事件总线反而绕远路：
- 定义 store：
export const useUserStore = defineStore('user', { state: () => ({ token: '', name: '' }), actions: { login(data) { this.token = data.token; this.name = data.name; } } }); - 任意组件直接读写：
const user = useUserStore(); console.log(user.name); user.login({ token: 'xxx' }); - 状态变更自动触发依赖它的所有视图更新，无需手动 emit/on，数据流完全可追踪
不复杂但容易忽略：通信方式不是越通用越好，而是越贴近实际关系越稳。父子用 props/emits，祖先后代用 provide/inject，跨域临时通知用 mitt，全局状态用 Pinia——每种都有明确边界和收敛路径。
