Vue3中的事件总线详解

一、Vue 3 事件总线的核心变化

熟悉 Vue 2 的朋友都知道，创建一个全局事件总线，最直接的方式就是 new Vue()。但到了 Vue 3，这个招牌方法失效了，背后的原因正是框架本身的革新。我们来具体看看变化在哪：

• 首先，Vue 构造函数不再直接导出了。现在，应用的入口变成了 createApp。
• 更重要的是，Vue 实例移除了事件发射器功能。这意味着我们熟悉的 $on、$off 和 $once 方法已经不复存在。

结论很明确：在 Vue 3 里，沿用 new Vue() 来创建事件总线这条路，已经彻底行不通了。

二、Vue 3 实现事件总线的推荐方案

既然“老办法”不灵了，我们有哪些“新路子”可走呢？别担心，社区已经提供了几种可靠的方案，下面重点介绍两种最主流、最受推崇的。

方案一：使用第三方库mitt（最推荐）

要问目前 Vue 社区的最佳实践是什么，答案多半是 mitt。这个小巧精悍（约 200 bytes）的库，虽然不依赖 Vue，但天生就能与 Vue 3 完美协作，功能完整又易于上手。

1. 安装 mitt

npm install mitt

2. 创建事件总线

通常的做法是创建一个独立的文件（比如 event-bus.js）来管理：

// event-bus.js
import mitt from 'mitt';

// 创建一个 mitt 实例并导出
const emitter = mitt();
export default emitter;

3. 在组件中使用

发布事件（发送消息）：

核心方法是 emitter.emit(eventType, data)。

订阅事件（接收消息）：

核心方法是 emitter.on(eventType, callback)。

这里有个关键点： 在使用 Composition API 的 setup 中，务必在 onMounted 生命周期钩子中订阅事件，并在 onUnmounted 中取消订阅。这是避免组件销毁后监听器残留、导致内存泄漏的标准操作。

除此之外，mitt 还提供了一些实用的 API：

• emitter.all: 这是一个 Map 对象，可以用来查看所有已注册的事件及其对应的处理函数。
• emitter.off(eventType, handler): 移除某个事件上指定的监听器。
• emitter.emit(eventType): 触发事件，可以不带任何数据。

方案二：使用provide/inject实现一个简单的事件总线

如果你的项目场景相对简单，并且不希望引入额外的依赖，那么利用 Vue 3 内置的 provide 和 inject 特性，自己实现一个轻量级的事件总线也未尝不可。

1. 在根组件（如 App.vue）提供事件总线

2. 在子组件中注入并使用

发布者组件：

订阅者组件：

三、Vue 3 事件总线 vs. 状态管理工具（如 Pinia）

总结与建议

• 对于 Vue 3 项目，首选方案无疑是 mitt。它几乎成为了 Vue 3 生态中实现轻量级事件通信的事实标准，既轻便又强大。
• 良好的工程习惯是：将事件总线的创建逻辑封装在一个独立的模块中（例如 event-bus.js）。这样做不仅管理方便，也使得维护和调试更加清晰。
• 千万记住在 onUnmounted 生命周期中取消事件监听。这一点再怎么强调都不为过，它是防止内存泄漏的生命线。
• 最后，需要警惕工具被滥用。如果应用中的数据流逐渐变得错综复杂，多个组件都需要频繁读写同一份数据，这时候就该考虑引入像 Pinia 这样的专业状态管理库了。事件总线擅长的是传递行为信号和瞬时通知，而管理持久化的应用状态，才是状态管理库的专长。把握好这个边界，才能让项目架构更清晰、更健壮。

希望以上梳理能为大家在 Vue 3 的项目开发中提供清晰的指引和实用的参考。