Vue源码学习心得之$emit和$on以及$off的个人理解

在vue中的自定义事件系统，我们可以在每个组件实例上通过

this.$on('eventName', callback);

　来监听当前实例上的事件，其中eventName必须是一个String或者是一个 Array<string>

　然后我们可以通过

this.$emit(eventName, args);

　来触发当前实例上的事件

　如果需要解绑事件的监听，可以通过

this.$off(eventName);

　注意，$off如果不指定事件名，则表示移除当前组件实例上的所有的事件监听器，如果传入了一个事件名则移除这个事件的所有监听器，如果事件名和callback同时传入，则只移除这个回调的监听器。

　那么这三个方法的底层源码是怎么实现的呢？

　首先这三个方法都是通过eventsMixin()进行初始化并且挂载到vue的原型上，

　

 

 

   我们可以进入eventsMixin()的源码里看看到底怎么挂载的

 

 

 可以看到这几个事件方法是直接添加到vue的原型上的

 接下来先看看$on的源码

 

 

 变量vm拿到的是当前组件实例，在vue中每一个组件都是一个vue的实例，这个没什么好说的。然后首先判断eventName是不是一个数组，前面提到过$on的第一个参数可以是一个Array<string>

如果是一个数组则依次遍历每个事件名将当前的事件的回调注册到事件列表中。

如果不是一个数组就直接向事件列表中添加回调，其中事件列表就是_events这个对象，

this.$on('listenDataModify', callback);

　这里我注册了一个listenDataModify的事件监听器，进入源码后发现不是一个数组会走else部分里的代码

　在当前实例上的_events对象上直接将listenDataModify注册进来。

this._events['listenDataModify'] = []; // 它的值是一个数组，然后将callback push到这个listenDataModify中

　最后将this返回， $on底层实现大致就是这样。