Vue中的全局事件总线：EventBus与$bus的比较详解与实战应用

1. EventBus实例：

   • var EventBus = new Vue() 会创建一个名为EventBus的Vue实例，并将其存储在变量EventBus中。
   • Vue.prototype.$bus = new Vue() 则直接在Vue的原型上创建一个新的Vue实例，并将其赋值给$bus属性。

2. 使用方式：

   • var EventBus = new Vue() 的方式需要你手动导入EventBus实例到需要使用的组件中。
   • Vue.prototype.$bus = new Vue() 的方式则无需手动导入，因为$bus已经成为Vue原型的一部分，你可以在任何组件中直接使用this.$bus来访问该实例。

3. 作用域和生命周期：

   • var EventBus = new Vue() 创建的EventBus实例的生命周期由你手动管理，需要在适当的时候进行销毁。
   • Vue.prototype.$bus = new Vue() 创建的$bus实例则随着Vue应用的生命周期一起管理，当Vue实例被销毁时，$bus实例也会被销毁。

因此，虽然这两种方式都可以实现全局事件总线的功能，但在使用上有一些细微的差别。Vue.prototype.$bus = new Vue() 更加简洁和方便，特别适合在Vue项目中实现全局事件总线的需求。

---

EventBus实例 

创建一个名为EventBus的Vue实例(/utils/event-bus.js)

import Vue from 'vue'

export const EventBus = new Vue()