Vue事件总线（EventBus）

阐述一下 VUE中 eventbus 的原理

解答：
EventBus是消息传递的一种方式，基于一个消息中心，订阅和发布消息的模式，称为发布订阅者模式。
on('name', fn)订阅消息，name:订阅的消息名称， fn: 订阅消息的函数（参数是接收的消息）
emit('name', args)发布消息, name:发布的消息名称 ， args：发布的消息

vue组件非常常见的有父子组件通信，兄弟组件通信。而父子组件通信就很简单，父组件会通过 props 向下传数据给子组件，当子组件有事情要告诉父组件时会通过 $emit 事件告诉父组件。如果两个页面没有任何引入和被引入关系，该如何通信了？

vuex？那如果项目没那么复杂，不需要类似Vuex这样的库来处理组件之间的数据通信呢，这时候就可以考虑Vue中的 事件总线 ，即 EventBus来通信。
EventBus 又称为事件总线。在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的“灾难”，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。

写的时候可能会碰到一些问题，嘿嘿，注意下发布/订阅时机，消息发布时，直接发布给（通知）订阅者，如果没有订阅者，就不发送。发布完毕了，再订阅，没用，只能等下次发布了，所以订阅事件必须在发布之前。

eg: A发布消息，B订阅消息
所以B页面要成功订阅消息的话，必须保证先加载B页面，然后再加载A，先把订阅者$on加载在内存中，否则拿不到消息。

我是钢筋我就必须刷新后先进A再进B。这就要先了解下Vue路由切换特性，vue路由切换时，会先加载新的组件，等新的组件渲染好但是还没有挂载前，销毁旧的组件，之后挂载新组件。

新组件beforeCreate
        ↓
新组件created
        ↓
新组件beforeMount
        ↓
旧组件beforeDestroy
        ↓
旧组件destroyed
        ↓
新组件mounted

注意，在$emit时，必须已经$on，否则将无法监听到事件。
所以正确的写法应该是在需要接收值的组件的created生命周期函数里写$on，在需要往外传值的组件的destroyed生命周期函数函数里写：

destroyed(){
  eventBus.$emit('dataUpdate',data)
}

这样写，在旧组件销毁的时候新的组件拿到旧组件传来的值，然后在挂载的时候更新页面里的数据。

一、这种俩页面跳转完全可以通过router传参解决，感觉忙活一圈没卵用；
二、B、C页面订阅，A发布，在进入B或者C时，上面那个destroyed的方法，必须是从A进B页面，那进C时就没了，而且也无法从mounted中直接获取数据然后更改data数据，有局限。
所以我感觉这个EventBus主要应用场景应该是，一个页面中有多个组件，也可能组件套组件，这种情况用props和emit传参太麻烦，用EventBus正好解决问题。

问：vue兄弟组件如何通讯？
1、让兄弟组件通过一个共同的父组件做为通讯桥梁彼此通讯（props、$emit）。
2、EventBus

废话少说上代码：
event-bus.js

import Vue from "vue";
export const EventBus = new Vue();

a.vue

b.vue

上面就是 EventBus 的使用方法，是不是很简单。但每次使用 EventBus 时都需要在各组件中引入 event-bus.js 。事实上，我们还可以让事情变得更简单一些。那就是创建一个全局的 EventBus 。

全局EventBus

main.js

...

var EventBus = new Vue();

Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function() {
      return EventBus;
    }
  }
});
...

a.vue

b.vue

插件挂载方式

1、定义一个统一事件管理器

// 插件挂载方式
import Vue from 'vue'
// Bus 就是一个Vue对象，因此Vue.$on: 监听`当前实例`上的自定义事件
let Bus = new Vue()
let install = (Vue) => {
  Vue.prototype.$bus = Bus
}
export default { install }

2、引用EventBus

import Vue from 'vue'
import Bus from '@/assets/js/eventBus'
Vue.use(Bus)

移除事件监听者

如果想移除事件的监听，可以像下面这样操作：

import { 
  eventBus 
} from './event-bus.js'
EventBus.$off('aMsg', {})

你也可以使用 EventBus.$off('aMsg') 来移除应用内所有对此某个事件的监听。或者直接调用 EventBus.$off() 来移除所有事件频道，不需要添加任何参数 。

知识点

Vue.$on 监听 当前实例 上的自定义事件。

事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的额外参数。

Vue.$off 移除自定义事件监听器。

vm.$off( [event, callback] )

如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。

发布订阅模式主要包含哪些内容呢?

1. 发布函数，发布的时候执行相应的回调
2. 订阅函数，添加订阅者,传入发布时要执行的函数,可能会携额外参数
3. 一个缓存订阅者以及订阅者的回调函数的列表
4. 取消订阅(需要分情况讨论)

自己实现一个 Observer 对象:

//用于存储订阅的事件名称以及回调函数列表的键值对
function Observer() {
    this.cache = {}  
}
 
//key:订阅消息的类型的标识（名称），fn收到消息之后执行的回调函数
Observer.prototype.on = function (key,fn) {
    if(!this.cache[key]){
        this.cache[key]=[]
    }
    this.cache[key].push(fn)
}
 
//arguments 是发布消息时候携带的参数数组
Observer.prototype.emit = function (key) {
    if(this.cache[key]&&this.cache[key].length>0){
        var fns = this.cache[key]
    }
    for(let i=0;i{
            if(item===fn){
                fns.splice(index,1)
            }
        })
    }
}
 
//example
 
var obj = new Observer()
obj.on('hello',function (a,b) {
    console.log(a,b)
})
obj.emit('hello',1,2)
//取消订阅事件的回调必须是具名函数
obj.on('test',fn1 =function () {
    console.log('fn1')
})
obj.on('test',fn2 = function () {
    console.log('fn2')
})
obj.remove('test',fn1)
obj.emit('test')

为什么会使用发布订阅模式呢? 它的优点在于:

• 实现时间上的解耦(组件,模块之间的异步通讯)
• 对象之间的解耦,交由发布订阅的对象管理对象之间的耦合关系.

引用：结合 Vue 源码谈谈发布-订阅模式