vue中eventBus的详细解读

eventBus知道vue得基本都知道，消息总线，他能解决孙子组件，兄弟组件等通信问题。她得使用也能简单

import Vue from "vue"
export default new Vue()

在使用得页面中引用这个文件就行，她根本得原理其实看上面就明白了，她使用了vue框架自带得$emit,$on等方法。我们在父子组件调用是用得this.$emit等和这个一样得原理，是不过eventBus全局化了，所以她得庐山真面目就是这。

她得原理很简单，使用也简单。我们看看具体$off是怎么实现得。大家都知道这是事件得移除。看代码

Vue.prototype.$off = function (event, fn) {
            var vm = this;
            // all
            if (!arguments.length) {
                vm._events = Object.create(null);
                return vm
            }
            // array of events
            if (Array.isArray(event)) {
                for (var i$1 = 0, l = event.length; i$1 < l; i$1++) {
                    vm.$off(event[i$1], fn);
                }
                return vm
            }
            // specific event
            var cbs = vm._events[event];
            if (!cbs) {
                return vm
            }
            if (!fn) {
                vm._events[event] = null;
                return vm
            }\
            // specific handler
            var cb;
            var i = cbs.length;
            while (i--) {
                cb = cbs[i];
                if (cb === fn || cb.fn === fn) {
                    cbs.splice(i, 1);
                    break
                }
            }
            return vm
        };

上面看得很清楚，如果不传任何东西就是删除所有事件，传单独事件就是删除这个事件下得所有回调方法，都传得话就是删除某个事件里面得某个回调方法。清楚明了，但是也会出现问题。

什么问题呢，比如我在第一个页面得creared生命周期$on一个事件，然后在beforeDestroy生命周期调用$off清楚这个生命周期（注意，一定要记得清除，否则事件会一直存在），路由调转到下一个页面时，在creared生命周期$on一个事件，然后在beforeDestroy生命周期调用$off。你会发现一个问题就是调转到下个页面时，$on监听得事件不会执行，仔细分析你会发现是生命周期得顺序问题，应该放到mounted里面$on就可以了