$on方法类似于addEventListener,用于监听某个事件,添加事件触发时执行的回调。

Vue.prototype.$on = function (event, fn) {
    var this$1 = this;
    var vm = this;
    if (Array.isArray(event)) {
        for (var i = 0, l = event.length; i < l; i++) {
            this$1.$on(event[i], fn);
        }
    } else {
      (vm._events[event] || (vm._events[event] = [])).push(fn);
        if (hookRE.test(event)) {
            vm._hasHookEvent = true;
        }
    }
    return vm
};

最核心的代码是这一行:(vm._events[event] || (vm._events[event] = [])).push(fn);。Vue把所有的自定义事件都组织在了_event下,每个事件维护一个数组,数组的每一项是触发事件时执行的回调。

作者还考虑到了多个事件有相同回调的情况,所以就有了Array.isArray(event)那个判断。但我个人认为这个设计不是很合理。

Vue.prototype.$on = function (event, fn) {
    var this$1 = this;
    var vm = this;
    if (typeof event === 'object') {
        for(key in event){
            this$1.$on(key,event[key]);
        }
    } else {
      (vm._events[event] || (vm._events[event] = [])).push(fn);
        if (hookRE.test(event)) {
            vm._hasHookEvent = true;
        }
    }
    return vm
};

上面是我修改的代码,我考虑的是传入一个对象,对象的键是事件名,值是回调。jQuery中经常见到这样设计的API。

results matching ""

    No results matching ""