在Vue.js内部有这样一段代码
其中定义了Vue构造函数，然后分别调用initMiXin，stateMixin，eventsMixin，lifecycleMixin，renderMixin，并将Vue构造函数当作参数传给这5个函数
这5个函数的作用就是向Vue的原型上挂载方法。
当函数initMixin被调用时，会向Vue构造函数的prototype属性添加_init方法，执行new Vue()时，会调用_init方法。
好，接下来进入到本文的标题，与事件相关的实例方法有4个，分别是，vm.emit,vm.off;
这四个方法实在eventsMixin中挂在到Vue构造函数和prototype属性中的。
当eventsMixin被调用的时候，会向Vue构造函数的prototype属性添加4个实例方法。
下面将介绍一下这四种方法
用法：监听当前实例上的自定义事件，事件可以由vm.$emit触发，回调函数会接收所有传入事件所触发的函数的额外参数
原理：只需要在注册事件时将回调函数收集起来，在触发事件时将收集起来的回调函数依次调用即可，代码如下
Vue.prototype.$on = function (event, fn) {
var vm = this;
if (Array.isArray(event)) {
for (var i = 0, l = event.length; i < l; i++) {
vm.$on(event[i], fn);
}
} else {
(vm._events[event] || (vm._events[event] = [])).push(fn);
}
return vm
};当event为数组的时候，需要遍历数组，使得数组中的每一项都调用vm.$on,使回调可以注册到数组中每项事件名所指定的事件列表中，当event参数不为数组时，就像事件列表中添加回调。
vm._events是一个对象，用来存储事件，使用事件名（event）从vm._events中取出事件列表，如果列表不存在，则使用空数组初始化，然后将回调函数添加到事件列表中。
vm._events在执行new Vue（）时，会执行this._init方法进行一系列操作，其中就在vue.js的实例上创建一个_events
用法：触发当前实例上的事件，附加参数都会传给监听器回调。
原理：vm.$emit作用是触发事件，所有的事件监听器回调都会存储在vm._events中，所以触发事件的实现思路是使用事件名从vm._events中取出对应的事件监听器回调
列表，然后依次执行列表中的监听器回调并将参数传递给监听器回调，代码如下
Vue.prototype.$emit = function (event) {
var vm = this;
var cbs = vm._events[event];
if (cbs) {
// const args = toArray(arguments,1);
cbs = cbs.length > 1 ? toArray(cbs) : cbs;
var args = toArray(arguments, 1);
var info = "event handler for \"" + event + "\"";
for (var i = 0, l = cbs.length; i < l; i++) {
try{
cbs[i].apply(vm,args)
}catch(e){
handleError(e,vm,`event handler for "${event}"`)
}
}
}
return vm
};使用event从vm._events中取出事件监听器回调函数列表，并将其赋值给变量cbs，如果cbs存在，依次调用每一个监听器回调并将其所有参数传给监听器回调。
toArray的作用是将类似于数组的数据换成真正的数组，它的第二个参数是起始位置，也就是说，args是一个数组，里面包含除第一个参数之外的所有参数。
和emit可以结合起来使用，大部分用于父子组件传值,但是这里有一个问题
1、究竟是由子组件内部主动传数据给父组件，由父组件监听接收（由子组件中操作决定什么时候传值）
2、还是通过父组件决定子组件什么时候传值给父组件，然后再监听接收 （由父组件中操作决定什么时候传值）
两种情况都有
事件触发通过子组件内部的事件触发自定义事件emit
事件触发，可以通过父组件操作子组件的事件来触发自定义事件emit
第一种情况
父组件 所以msg打印出来就是蜡笔小柯南
子组件
第二种情况
父组件 通过ref操作子组件触发事件
子组件
将两者情况对比，区别就在于$emit 自定义事件的触发是有父组件还是子组件去触发
第一种，是在子组件中定义一个click点击事件来触发自定义事件$emit,然后在父组件监听
第二种，是在父组件中第一一个click点击事件，在组件中通过refs获取实例方法来直接触发事件,然后在父组件中监听
用法：
移除自定义事件监听器。
如果没有提供参数，则移除所有的事件监听器；
如果只提供了事件，则移除该事件所有的监听器；
如果同时提供了事件与回调，则只移除这个回调的监听器。
Vue.prototype.$off = function(event,fn){
const vm = this;
//1-1、没有提供参数的情况，此时需要移除所有事件的监听器
if(!arguments.length){
// 当arguments.lengtha为0时，说明没有任何参数，这时需要移除所有事件监听器
// 因此重置了vm._events属性，vm._events存储所有事件，所以将vm._events重置
// 为初始状态就等同于将所有事件都移除了。
vm._events = Object.create(null);
return vm;
}
// 1-2、vm.$off的第一个参数支持数组，当event为数组的时候，只需要将数组遍历一遍，然后
// 数组中的每一项依次调用vm.$off;
if(Array.isArray(event)){
for(let i = 0 ; i<event.length; i++){
this.$off(event[i],fn)
}
return vm;
}
// 2、只提供了事件名，则移除该事件所有的监听器，只需要将vm._events中的event重置为空就行
const cbs = vm._events[event];
if(!cbs){
return vm;
}
// 这里做了一个安全检测，如果这个事件没有被监听，vm._events内找不到任何监听器，直接退出
// 程序，然后判断是否只有一个参数，如果是，将事件名在vm._events中所有事件都移除，只需要
// 将vm._events上以该事件为属性的值设置为null即可
if(arguments.length === 1){
vm._events[event] = null;
return vm;
}
// 3、如果同时提供了事件与回调，那么只移除这个回调的监听器，将使用参数中提供的事件名从
// vm._events取出事件列表，然后从列表中找到与参数中提供的回调函数相同的那个函数，并
// 将它从列表中移除
if(fn){
// 先判断是否有fn参数，有则说明用户同时提供了event和fn两个参数，然后从vm._events
// 中取出事件监听器列表并遍历它，如果列表中的某一项与fn相同，或者某一项的fn属性与fn相同，
// 使用splice方法将它从列表中移除，当循环结束后，列表中所有与用户参数中提供的fn相同的监听器
// 都会被移除
const cbd = vm._events[event];
let cb;
let i = cbs.length;
while(i--){
// 这里有一个细节要注意，在代码中遍历列表是从后向前循环，这样在列表中移除当前
// 位置的监听器，不会影响列表中未遍历到的监听器位置，如果是从前向后遍历，那么当从
// 列表中移除一个监听器时，后面的监听器会自动向前移动一个位置，会导致下一轮循环
// 时跳过一个元素。
cb = cbs[i];
if(cb === fn || cb.fn === fn){
cbs.splice(i,1);
break;
}
}
}
return vm;
}
Vue.prototype.$once = function (event, fn) {
var vm = this;
function on () {
vm.$off(event, on);
fn.apply(vm, arguments);
}
on.fn = fn;
vm.$on(event, on);
return vm
};在vm.中调用on来实现监听自定义事件的功能，当自定义事件触发后会执行拦截器，将监听器从事件列表中移除。
在vm.使用on来监听事件，首先，将函数on注册到事件中，当自定义事件被触发时，会执行函数on(在这个函数中，会用时vm.$off将自定义事件移除)，然后
手动执行函数，并将参数arguments传递给函数fn，这样就可以实现vm.$once的功能。
但是要注意on.fn = fn这行代码，前面介绍vm.$off时提到，在移除监听器时，需要将用户提供的监听器函数与列表中的监听器函数进行对比，相同部分会被移除，这导致当我们使用拦截器代替监听器注入到事件列表中时，
拦截器和用户提供的函数时不相同的，此时用户使用vm.$off来移除事件监听器，移除操作失败。
这个问题的解决方案是将用户提供的原始监听器保存到拦截器的fn属性中，当vm.$off方法遍历事件监听器列表时，同时会检查监听器和监听器的fn属性是否与用户提供的监听器函数相同，只要有一个相同，就说明需要被移除
的监听器找到了，将被找到的拦截器从监听器列表中移除
