vue event bus实现原理
Vue Event Bus 实现原理
Vue Event Bus 是一种基于发布-订阅模式的通信机制，用于在非父子组件之间传递事件和数据。其核心原理是利用 Vue 实例作为事件中心，通过 $on、$emit 和 $off 方法实现事件的监听、触发和移除。
核心实现步骤
创建 Event Bus
通过创建一个新的 Vue 实例作为全局事件总线，通常在项目的入口文件（如 main.js）中定义：
// main.js
export const EventBus = new Vue();监听事件
在需要接收事件的组件中，使用 $on 方法监听事件：
// ComponentA.vue
import { EventBus } from './main.js';
EventBus.$on('custom-event', (payload) => {
console.log('事件触发，数据:', payload);
});触发事件
在需要发送事件的组件中，使用 $emit 方法触发事件并传递数据：
// ComponentB.vue
import { EventBus } from './main.js';
EventBus.$emit('custom-event', { message: 'Hello from ComponentB' });移除事件监听
为避免内存泄漏，可以在组件销毁时使用 $off 方法移除事件监听：
// ComponentA.vue
beforeDestroy() {
EventBus.$off('custom-event');
}底层机制
-
Vue 实例的事件系统
Vue 实例内部维护了一个事件队列（_events对象），$on会将回调函数注册到对应事件名的数组中，$emit会遍历该数组并执行所有回调。 -
发布-订阅模式
Event Bus 是典型的发布-订阅模式实现，解耦了事件的发送方和接收方，双方只需依赖事件中心，无需直接交互。 -
单例模式
全局唯一的 Vue 实例确保了所有组件共享同一个事件中心。
注意事项
-
内存泄漏
不手动移除监听可能导致回调函数累积，需在组件销毁时清理。 -
命名冲突
全局事件名应唯一，建议使用模块化前缀（如user:updated）。 -
替代方案
在 Vue 2.x 中常用 Event Bus，Vue 3.x 推荐使用mitt或provide/inject等方案。
