在Vue.prototype._init 中有一些init函数，今天我们来研究这些init函数
Vue.prototype._init = function (options) {......{initProxy(vm);}......initLifecycle(vm);initEvents(vm);initRender(vm);callHook$1(vm, 'beforeCreate', undefined, false /* setContext */);initInjections(vm); // resolve injections before data/propsinitState(vm);initProvide(vm); // resolve provide after data/propscallHook$1(vm, 'created');......
}上一篇中已经研究了initLifecycle，今天我们往下研究
Vue.prototype._init = function (options) {......initEvents(vm);......
}看下源码 initEvents(vm);
function initEvents(vm) {vm._events = Object.create(null);vm._hasHookEvent = false;// init parent attached eventsconst listeners = vm.$options._parentListeners;if (listeners) {updateComponentListeners(vm, listeners);}
}vm._events = Object.create(null);该行代码创建了一个原型为null的空对象，并将这个对象赋值给vm实例的_events属性
vm._hasHookEvent = false;该行代码 给vm实例的_hasHookEvent属性赋值为false
const listeners = vm.$options._parentListeners;从英文注释，我们可以知道这行代码是为了初始化父组件添加的事件
因为是取的组件$options属性的_parentListeners，这个比较复杂，涉及到双向绑定和虚拟dom，我们后续研究，先暂时理解为父组件绑定在当前组件上的事件
如果存在事件listeners
则执行下面这段代码
if (listeners) {updateComponentListeners(vm, listeners)
}function updateComponentListeners(vm, listeners, oldListeners) {target$1 = vm;updateListeners(listeners, oldListeners || {}, add$1, remove$1, createOnceHandler$1, vm);target$1 = undefined;
}target$1 = vm;这行代码的主要作用是保留对vm实例的引用
updateListeners(listeners, oldListeners || {}, add, remove, vm)这行代码执行updateListeners方法
function add$1(event, fn) {target$1.$on(event, fn);
}
function remove$1(event, fn) {target$1.$off(event, fn);
}涉及到 target$1.$on 和 target$1.$off
Vue.prototype.$on = function (event, fn) {const vm = this;if (isArray(event)) {for (let i = 0, l = event.length; i < l; i++) {vm.$on(event[i], fn);}}else {(vm._events[event] || (vm._events[event] = [])).push(fn);// optimize hook:event cost by using a boolean flag marked at registration// instead of a hash lookupif (hookRE.test(event)) {vm._hasHookEvent = true;}}return vm;
};else之前的代码都很简单，先缓存this，如果传入的事件是事件数组的话，则分别对数组内的每一项调用$on绑定事件
else之前的代码 如果event不是个数组，给vm._events[event]传入fn函数
if (hookRE.test(event)) {vm._hasHookEvent = true;
}它表示的是父组件有没有直接绑定钩子函数在当前组件上
return vm
最后 返回vm实例对象
现在我们知道了vm.$on方法主要就是把传入的方法给push到_events属性里，方便之后被$emit调用
Vue.prototype.$off = function (event, fn) {const vm = this;// allif (!arguments.length) {vm._events = Object.create(null);return vm;}// array of eventsif (isArray(event)) {for (let i = 0, l = event.length; i < l; i++) {vm.$off(event[i], fn);}return vm;}// specific eventconst cbs = vm._events[event];if (!cbs) {return vm;}if (!fn) {vm._events[event] = null;return vm;}// specific handlerlet cb;let i = cbs.length;while (i--) {cb = cbs[i];if (cb === fn || cb.fn === fn) {cbs.splice(i, 1);break;}}return vm;
};const vm = this;
// all
if (!arguments.length) {vm._events = Object.create(null);return vm;
}从代码我们看出来当arguments.length为0的时候，说明没有任何参数，这时就需要移除所有的事件监听器，因此我们重置了 vm.events 属性。
// array of events
if (isArray(event)) {for (let i = 0, l = event.length; i < l; i++) {vm.$off(event[i], fn);}return vm;
}如果参数event是个数组，则循环调用vm.$off
分析特殊情况
const cbs = vm._events[event];
if (!cbs) {return vm;
}
if (!fn) {vm._events[event] = null;return vm;
}表示，有event但是没有cbs，没有callbacks，没有回调函数
则vm._events[event] = null，返回vm实例对象
let cb;
let i = cbs.length;
while (i--) {cb = cbs[i];if (cb === fn || cb.fn === fn) {cbs.splice(i, 1);break;}
}
return vm;事件名和回调都有，从从列表中找到与参数提供回调函数相同的那个函数，并将它从列表中移除
再回到updateListeners方法
function updateListeners(on, oldOn, add, remove, createOnceHandler, vm) {let name, cur, old, event;for (name in on) {cur = on[name];old = oldOn[name];event = normalizeEvent(name);if (isUndef(cur)) {warn$2(`Invalid handler for event "${event.name}": got ` + String(cur), vm);}else if (isUndef(old)) {if (isUndef(cur.fns)) {cur = on[name] = createFnInvoker(cur, vm);}if (isTrue(event.once)) {cur = on[name] = createOnceHandler(event.name, cur, event.capture);}add(event.name, cur, event.capture, event.passive, event.params);}else if (cur !== old) {old.fns = cur;on[name] = old;}}for (name in oldOn) {if (isUndef(on[name])) {event = normalizeEvent(name);remove(event.name, oldOn[name], event.capture);}}
}for (name in on) {cur = on[name];old = oldOn[name];event = normalizeEvent(name);if (isUndef(cur)) {warn$2(`Invalid handler for event "${event.name}": got ` + String(cur), vm);}else if (isUndef(old)) {if (isUndef(cur.fns)) {cur = on[name] = createFnInvoker(cur, vm);}if (isTrue(event.once)) {cur = on[name] = createOnceHandler(event.name, cur, event.capture);}add(event.name, cur, event.capture, event.passive, event.params);}else if (cur !== old) {old.fns = cur;on[name] = old;}
}遍历on中对象
如果on[name]未定义，则调用警告warn$2
如果oldOn[name]未定义，如果原事件 没有定义，则调用 createFnInvoker() 进行定义；但如果是一个 .once 修饰的事件，则会用 createOnceHandler() 重新定义该事件；最后将其添加到当前实例的 $on 属性中
如果on[name]与oldOn[name]不一致，将原事件定义的 函数定义部分 重新指向为当前新的事件定义，并赋值给新事件对象中
for (name in oldOn) {if (isUndef(on[name])) {event = normalizeEvent(name);remove(event.name, oldOn[name], event.capture);}
}遍历oldOn中对象，将不存在于新事件对象中的事件去除
