从 Vue3 回望 Vue2：事件总线的前世今生

以 Vue3 开发者视角 回顾 Vue2 中事件总线机制 的文章。文章将围绕事件总线的缘起、用法、局限与演进展开，帮助 Vue3 开发者理解 Vue2 通信方式的历史意义及现代替代方案。

一、前言：Vue3 时代，我们为何还要看 Vue2？

Vue3 的出现代表着 Vue 框架架构思想的一次深刻转变：

从基于选项的声明式组件模型，转向组合式、函数化、更可维护的逻辑表达方式。

但 Vue3 的前身 ------ Vue2，至今依然活跃于大量老项目中。作为 Vue3 开发者，如果你：

正在接手一个 Vue2 项目
在做 Vue2 向 Vue3 的迁移
想深入理解 Vue3 各种通信方式的"由来"

那么，你必须了解 Vue2 中一项非常核心、但如今已被淘汰的通信机制：事件总线（Event Bus）。

二、事件总线是什么？ ------ Vue2 的"组件内广播电台"

在 Vue2 中，组件通信主要有以下几种方式：

父传子：props
子传父：$emit
跨组件：Vuex（状态管理）
非父子之间通信：事件总线（Event Bus）

定义：

事件总线是 Vue2 中一种基于 Vue 实例事件机制的跨组件通信方式，本质上是一个全局的事件调度中心。

开发者通过它，实现组件之间"发布-订阅"关系：

一个组件 触发事件 ：EventBus.$emit('event-name', payload)
另一个组件 监听事件 ：EventBus.$on('event-name', callback)

三、事件总线的用法全景回顾

1. 创建事件总线对象

js 复制代码

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

这个 EventBus 实例就像一个广播站，所有组件都可以监听和发送消息。

2. 使用场景示例

场景1：兄弟组件通信

js 复制代码

// ComponentA.vue
EventBus.$emit('say-hello', '你好')

// ComponentB.vue
EventBus.$on('say-hello', (msg) => {
  console.log('接收到消息：', msg)
})

场景2：打开弹窗、通知刷新等全局事件控制

js 复制代码

EventBus.$emit('open-modal', { title: '确认删除？' })

四、Vue3 视角下的反思：事件总线的问题在哪里？

虽然事件总线在 Vue2 中灵活、快速、简单，但 Vue3 设计者最终选择移除这套机制，理由非常明确：

问题点	Vue3 的设计理念
不透明、不可控	无法追踪事件从哪里发出、何时被触发
易造成内存泄漏	忘记 `$off` 导致事件残留
调试困难	控制台看不到事件流
全局污染严重	所有组件都依赖于同一个对象，耦合度高
类型不友好	难以与 TypeScript 配合

Vue3 提倡明确的数据流方向 、函数化逻辑表达 和类型安全，因此摒弃了基于组件实例的事件通信方式。

五、Vue3 的现代替代方案有哪些？

1. 使用 `mitt` 构建轻量事件总线（推荐）

bash 复制代码

npm install mitt

js 复制代码

// event-bus.ts
import mitt from 'mitt'
export const emitter = mitt()

组件使用方式：

js 复制代码

// 发射事件
emitter.emit('say-hello', 'Hello')

// 监听事件
emitter.on('say-hello', (msg) => {
  console.log('收到消息', msg)
})

💡 mitt 是 Vue3 世界中最接近 Vue2 EventBus 的替代方案，但它不依赖 Vue 本身，更轻量、可维护、支持 TS。

2. `pinia`：用于状态驱动的全局通信

当事件之间有状态依赖时，使用 pinia 替代事件总线，可以让通信变为状态响应式更新，更清晰、调试更友好。

ts 复制代码

// store.ts
export const useUserStore = defineStore('user', {
  state: () => ({ name: '' }),
  actions: {
    updateName(newName) {
      this.name = newName
    }
  }
})

组件中调用：

ts 复制代码

const userStore = useUserStore()
userStore.updateName('余华杰')

3. `provide/inject`：祖先组件向后代传递共享值

适合"组件树中但非直接父子"的通信场景。

ts 复制代码

// 父组件
provide('theme', 'dark')

// 孙组件
const theme = inject('theme')

六、Vue3 对事件总线的最终态度

Vue3 核心团队对事件总线的态度可以总结为一句话：

"事件总线是一个权宜之计，而不是长期可维护的架构选择。"

七、总结：Vue3 开发者如何理解 Vue2 的事件总线？

对比维度	Vue2 事件总线	Vue3 推荐机制
核心机制	基于组件实例事件系统	mitt、pinia、emit、inject
是否推荐	适用于小项目，已过时	✅ 推荐现代方式
可维护性	❌ 差	✅ 好
状态支持	❌ 仅传递数据	✅ 响应式状态
类型支持	❌ 较差	✅ 可用 TypeScript 定义

八、写给 Vue3 开发者的一句话建议

如果你在 Vue3 项目中还在考虑用"事件总线"，说明你的架构还有优化空间。请使用更清晰、更现代、更类型安全的通信方式。

从 Vue3 回望 Vue2：事件总线的前世今生