当前位置：首页 > VUE

eventbus实现原理vue

2026-02-10 22:53:52VUE

EventBus 的实现原理

EventBus 在 Vue 中通常是一个全局事件总线，用于组件间的通信。其核心原理基于发布-订阅模式（Pub-Sub），通过一个中央事件管理器来协调事件的触发和监听。

基本实现步骤

创建一个全局 EventBus 实例

// 通常在一个单独的模块中定义
import Vue from 'vue';
export const EventBus = new Vue();

发布事件（触发事件）

EventBus.$emit('event-name', payload);

$emit 方法用于触发指定名称的事件，并传递数据（payload）给监听器。

订阅事件（监听事件）

EventBus.$on('event-name', (payload) => {
  // 处理事件逻辑
});

$on 方法用于监听指定名称的事件，并在事件触发时执行回调函数。

取消订阅

EventBus.$off('event-name', callback);

$off 方法用于移除指定事件的监听器，避免内存泄漏。

底层机制

Vue 的 EventBus 利用了 Vue 实例内置的事件系统。每个 Vue 实例都实现了事件接口，包括以下方法：

$on: 注册事件监听器。
$once: 注册一次性事件监听器（触发一次后自动移除）。
$off: 移除事件监听器。
$emit: 触发事件。

核心逻辑

事件注册
调用 $on 时，Vue 会将回调函数存储在一个内部对象中，以事件名称为键，回调函数列表为值。
事件触发
调用 $emit 时，Vue 会根据事件名称查找对应的回调函数列表，依次执行这些函数，并传入 $emit 提供的参数。
事件移除
调用 $off 时，Vue 会从内部对象中移除指定事件名称的回调函数，或清空所有监听器。

代码示例

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

class EventBus {
  constructor() {
    this.events = {};
  }

  $on(eventName, callback) {
    if (!this.events[eventName]) {
      this.events[eventName] = [];
    }
    this.events[eventName].push(callback);
  }

  $emit(eventName, ...args) {
    const callbacks = this.events[eventName];
    if (callbacks) {
      callbacks.forEach(callback => callback(...args));
    }
  }

  $off(eventName, callback) {
    if (!eventName) {
      this.events = {};
      return;
    }
    if (!callback) {
      delete this.events[eventName];
      return;
    }
    const callbacks = this.events[eventName];
    if (callbacks) {
      this.events[eventName] = callbacks.filter(cb => cb !== callback);
    }
  }
}

export const CustomEventBus = new EventBus();