從 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. 創建事件總線對象

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

這個 EventBus 實例就像一個廣播站，所有組件都可以監聽和發送消息。

---

2. 使用場景示例

場景1：兄弟組件通信

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

場景2：打開彈窗、通知刷新等全局事件控制

EventBus.$emit('open-modal', { title: '確認刪除？' })

---

四、Vue3 視角下的反思：事件總線的問題在哪里？

雖然事件總線在 Vue2 中靈活、快速、簡單，但 Vue3 設計者最終選擇移除這套機制，理由非常明確：

問題點	Vue3 的設計理念
不透明、不可控	無法追蹤事件從哪里發出、何時被觸發
易造成內存泄漏	忘記 $off 導致事件殘留
調試困難	控制臺看不到事件流
全局污染嚴重	所有組件都依賴于同一個對象，耦合度高
類型不友好	難以與 TypeScript 配合

Vue3 提倡明確的數據流方向、函數化邏輯表達和類型安全，因此摒棄了基于組件實例的事件通信方式。

---

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

1. 使用 mitt 構建輕量事件總線（推薦）

npm install mitt

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

組件使用方式：

// 發射事件
emitter.emit('say-hello', 'Hello')// 監聽事件
emitter.on('say-hello', (msg) => {console.log('收到消息', msg)
})

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

---

2. pinia：用于狀態驅動的全局通信

當事件之間有狀態依賴時，使用 pinia 替代事件總線，可以讓通信變為狀態響應式更新，更清晰、調試更友好。

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

組件中調用：

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

---

3. provide/inject：祖先組件向后代傳遞共享值

適合“組件樹中但非直接父子”的通信場景。

// 父組件
provide('theme', 'dark')// 孫組件
const theme = inject('theme')

---

六、Vue3 對事件總線的最終態度

Vue3 核心團隊對事件總線的態度可以總結為一句話：

“事件總線是一個權宜之計，而不是長期可維護的架構選擇。”

---

七、總結：Vue3 開發者如何理解 Vue2 的事件總線？

對比維度	Vue2 事件總線	Vue3 推薦機制
核心機制	基于組件實例事件系統	mitt、pinia、emit、inject
是否推薦	適用于小項目，已過時	? 推薦現代方式
可維護性	? 差	? 好
狀態支持	? 僅傳遞數據	? 響應式狀態
類型支持	? 較差	? 可用 TypeScript 定義

---

八、寫給 Vue3 開發者的一句話建議

如果你在 Vue3 項目中還在考慮用“事件總線”，說明你的架構還有優化空間。請使用更清晰、更現代、更類型安全的通信方式。