eventbus实现原理vue
EventBus 的实现原理
EventBus 是一种发布/订阅模式（Pub/Sub）的实现，用于 Vue 组件间的通信。其核心原理是通过一个中央事件总线来管理事件的注册、触发和销毁。
核心机制
事件注册
组件通过 $on 方法订阅事件，将回调函数存储到 EventBus 的事件列表中。例如：
EventBus.$on('eventName', callback);事件触发
通过 $emit 方法触发事件，EventBus 遍历事件列表并执行对应的回调函数。例如：
EventBus.$emit('eventName', payload);事件销毁
通过 $off 方法移除事件监听，避免内存泄漏。例如：
EventBus.$off('eventName', callback);实现代码示例
以下是一个简单的 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) {
const callbacks = this.events[eventName];
if (callbacks) {
this.events[eventName] = callbacks.filter(cb => cb !== callback);
}
}
}
const bus = new EventBus();
export default bus;Vue 中的使用方式
全局注册
在 Vue 原型上挂载 EventBus，方便所有组件调用：
import Vue from 'vue';
const EventBus = new Vue();
Vue.prototype.$eventBus = EventBus;组件中使用
订阅事件：
this.$eventBus.$on('updateData', this.handleUpdate);触发事件：
this.$eventBus.$emit('updateData', newData);移除事件：
this.$eventBus.$off('updateData', this.handleUpdate);注意事项
- 内存泄漏：组件销毁时需手动移除事件监听，否则回调函数会一直存在。
- 命名冲突：事件名建议使用模块前缀避免重复。
- 替代方案：复杂场景建议使用 Vuex 或 Provide/Inject。
