vue eventBus实现原理，你没看懂算我输

刚开始拿到eventBus的时候很幼稚的想，用一个全局vue对象充当数据容器，那为什么不用一个全局的map就可以

window.busMap = {}

组件a

pd: window.busMap.a,

组件b

  created () {
    window.busMap.a = '1'
  },

效果

在a组件给全局map赋值，在b组件确实能获取到值，但是map不会帮你监听分发数据所以这只是一次性买卖，当我通过点击事件修改map中的值时，b组件并不会根据map值的更新而更新，
下面我们看全局vue对象，也就是eventbus
a组件

效果

在vueBus这个vue对象中注册busEvent事件，根据emit源码（如下）遍历执行所有名为event的事件。当我们在b组件emit 分发事件后再a组件注册事件就将被执行 cbs[i].apply(vm, args);，再a组件的参数就将赋值给a组件中的data，根据vue数据绑定原理 此时this.busPd的set()方法被触发，遍历busPd属性在get()方法中收集到的依赖，并更新依赖也就是{{busPd}}，此时数据就从一个vue对象传递到另一个vue对象

Vue.prototype.$emit = function (event) {
    var vm = this;
    console.log(vm);
    {
      var lowerCaseEvent = event.toLowerCase();
      if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
        tip(
          "Event \"" + lowerCaseEvent + "\" is emitted in component " +
          (formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
          "Note that HTML attributes are case-insensitive and you cannot use " +
          "v-on to listen to camelCase events when using in-DOM templates. " +
          "You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\"."
        );
      }
    }
    var cbs = vm._events[event];
    console.log(cbs);
    if (cbs) {
      cbs = cbs.length > 1 ? toArray(cbs) : cbs;
      var args = toArray(arguments, 1);
      for (var i = 0, l = cbs.length; i < l; i++) {
        cbs[i].apply(vm, args);／／当emit的时候调用该事件。注意上面说的vue在初始化的守候。用bind修饰了事件函数。所以组件上挂载的事件都是在父作用域中的
      }
    }
    return vm
  };