Vue事件总线（Event Bus）

Vue事件总线（Event Bus）

        在使用Vue框架开发时，组件通信肯定是不可避免的需求。对于父子组件间的通信，Vue提供了props和$emit/$on等内置机制，实现起来还算是比较简单方便。然而，当遇到了些相对复杂情景，比如在兄弟组件间进行通信时，这些内置机制就显得力不从心了。这时，Vue事件总线（EventBus）作为一种灵活的解决方案应运而生啦。本篇文章将详细讲解Vue事件总线的原理、使用及最佳实践，帮助大家更好地去理解和应用这一技术。

什么是Vue事件总线

        那么事件总线是什么呢？Vue事件总线是一种实现组件之间通信的自定义事件处理系统。它基于Vue实例的$emit、$on和$off方法，允许任意组件通过事件总线来发送和接收消息，从而实现了跨组件通信的目的。事件总线就如他的名字所说：“事件公交车”，由于组件可以注册监听事件，也可以触发事件，而且还可以通过事件传递数据，那么我们可不可以创建一辆每个组件都可以上的公交车呢，既可以给这个Bus传输数据，也可以监听触发事件并从Bus上获取数据。通过这么一个Bus，来让数据在组件间任意传递。

基本使用以及原理解析

1. 创建事件总线

在Vue中，我们可以创建一个新的Vue实例作为事件总线。这个实例不挂载到DOM上，只用于管理事件。它本质上是一个空的Vue实例，仅用于提供$emit、$on和$off等事件处理方法。

1. 事件的发布与监听

发布事件：组件通过调用事件总线的$emit方法来触发事件，并可以传递数据作为事件的参数。

监听事件：组件通过调用事件总线的$on方法来监听事件。当事件被触发时，相应的回调函数将被执行。

1. 销毁事件监听

在组件销毁时，应调用事件总线的$off方法来取消对事件的监听，防止内存泄漏。

注意事项

1. 生命周期与事件触发

由于Vue组件的生命周期，确保在正确的时机触发事件和监听事件至关重要。通常，$emit应放在mounted或用户交互的回调函数中，而$on则应放在mounted钩子中，并在beforeDestroy钩子中解绑事件。

1. 内存泄漏

若不及时解绑事件，可能会导致内存泄漏。因此，每个在事件总线上注册了监听器的组件都应该在销毁前解绑这些监听器。这通常通过调用$off方法来实现，该方法可以从事件总线上移除特定的事件监听器。如果需要在组件销毁时解绑所有事件监听器，可以调用$off方法但不传递任何参数，这将移除该组件在事件总线上注册的所有监听器。

3.异步事件处理

在处理异步事件时，需要注意事件触发和响应之间的时间差。如果组件在事件响应之前就被销毁了，那么可能会导致内存泄漏或错误。为了避免这种情况，可以在组件销毁前检查是否还有未处理的事件监听器，并及时解绑。

4.替代方案

虽然事件总线在某些情况下非常有用，但对于实际的开发情景下，或许还是用Vuex来管理更为合适