eventbus实现原理vue

EventBus 的实现原理（Vue）

EventBus 在 Vue 中通常是一个全局的 Vue 实例，用于跨组件通信。其核心原理基于 Vue 的自定义事件系统，通过 $on、$emit 和 $off 方法实现事件的订阅、发布和销毁。

核心机制

1. 事件订阅 ($on)
   组件通过 EventBus.$on(eventName, callback) 监听特定事件。EventBus 内部维护一个事件列表，将回调函数存储到对应事件名的数组中。

   EventBus.$on('custom-event', (payload) => {
     console.log('事件触发:', payload);
   });

2. 事件发布 ($emit)
   通过 EventBus.$emit(eventName, payload) 触发事件，EventBus 会遍历事件名对应的回调数组，依次执行回调并传递参数。

   EventBus.$emit('custom-event', { data: 'test' });

3. 事件销毁 ($off)
   使用 EventBus.$off(eventName) 移除指定事件的所有回调，或直接移除单个回调函数。

   // 移除所有监听
   EventBus.$off('custom-event');
   // 移除单个回调
   const handler = (payload) => { /* ... */ };
   EventBus.$off('custom-event', handler);

实现示例

以下是一个简单的 EventBus 实现代码：

// 创建 EventBus
const EventBus = new Vue();

// 组件A：订阅事件
EventBus.$on('update-data', (data) => {
  console.log('接收数据:', data);
});

// 组件B：发布事件
EventBus.$emit('update-data', { message: 'Hello EventBus' });

// 销毁事件
EventBus.$off('update-data');

注意事项

• 内存泄漏
  不主动销毁事件监听可能导致回调函数累积，需在组件生命周期（如 beforeDestroy）中调用 $off。

• 命名冲突
  全局事件名建议使用命名空间（如 user:login）避免重复。

• 替代方案
  复杂场景建议使用 Vuex 或 Provide/Inject 替代 EventBus，以更好地管理状态。