vue event bus实现原理

Vue Event Bus 实现原理

Vue Event Bus 是一种跨组件通信的机制，通常用于非父子组件之间的通信。其核心原理基于 Vue 实例的事件系统。

基本实现方式

创建一个空的 Vue 实例作为事件中心，通过 $on、$emit 和 $off 方法实现事件的监听、触发和移除。

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

// 组件 A 监听事件
EventBus.$on('custom-event', (payload) => {
  console.log('Received:', payload);
});

// 组件 B 触发事件
EventBus.$emit('custom-event', { data: 'example' });

// 移除事件监听
EventBus.$off('custom-event');

核心机制解析

Vue 实例内部维护一个 _events 对象，用于存储所有注册的事件及其对应的回调函数。当调用 $on 方法时，会将回调函数添加到对应事件的数组中；$emit 会遍历执行该事件的所有回调；$off 则移除指定事件或全部事件的回调。

// 模拟简化版实现
class EventBus {
  constructor() {
    this._events = Object.create(null);
  }

  $on(event, fn) {
    (this._events[event] || (this._events[event] = [])).push(fn);
  }

  $emit(event, ...args) {
    const cbs = this._events[event];
    if (cbs) {
      cbs.forEach(fn => fn.apply(this, args));
    }
  }

  $off(event, fn) {
    if (!arguments.length) {
      this._events = Object.create(null);
      return;
    }
    if (!fn) {
      this._events[event] = null;
      return;
    }
    const cbs = this._events[event];
    if (cbs) {
      this._events[event] = cbs.filter(cb => cb !== fn);
    }
  }
}

实际应用场景

适合中小型项目中简单的跨组件通信，特别是层级较深的组件或兄弟组件之间。相比 Vuex，Event Bus 更轻量但缺乏状态管理能力。

注意事项

过度使用 Event Bus 可能导致代码难以维护，建议在大型项目中优先考虑 Vuex 或 Provide/Inject。需要手动移除事件监听以避免内存泄漏，通常在组件销毁时调用 $off。