vue bus实现原理

Vue Event Bus 实现原理

Vue Event Bus 的核心是利用一个独立的 Vue 实例作为事件中心，通过其 $emit 和 $on 方法实现组件间通信。以下是具体实现机制：

空 Vue 实例作为中介 创建一个不挂载到 DOM 的 Vue 实例作为事件总线，这个实例仅用于管理事件：

const bus = new Vue()

事件发布订阅模式

• 发布事件：通过 $emit 触发事件并传递数据

  bus.$emit('event-name', payload)

• 订阅事件：通过 $on 监听事件并处理数据

  bus.$on('event-name', (payload) => {
  console.log(payload)
  })

底层原理

1. Vue 实例内部维护一个 _events 对象存储所有事件监听器
2. $on 方法将回调函数注册到对应事件名的数组中
3. $emit 方法触发事件时，会遍历执行该事件名对应的所有回调函数

生命周期注意事项

• 组件销毁前需用 $off 移除监听，避免内存泄漏

  beforeDestroy() {
  bus.$off('event-name')
  }

替代方案比较

对于简单场景，Event Bus 提供了一种轻量级的解决方案，但在复杂应用中建议使用 Vuex 进行状态管理。