通过Vue源代码解析$on、$emit实现原理

More OOXX With Vue

写在前面

阅读Vue的源码对深入学习Vue框架是非常有必要的，只知道它表面的用法，而不知道它内部的原理那就说不上是真正熟悉掌握了这一门框架。
也可以来我的博客看哦传送门

Vue的$emit、$on和Node.js的EventEmitter的使用方法非常类似。

正式开始

$on绑定事件

Vue中的$on是一种将函数与事件绑定的方法。

通过Vue的源代码可以看到，$on调用时需要两个参数，第一个是字符串或数组类型作为事件的名称，第二个是触发事件执行的回调函数。$on第一步会对第一个参数做一个是否为数组的判断，这里可以看出$on允许为多个事件绑定同一个回调函数。

如果参数为数组，那么它会使用for遍历这个数组，并进行递归。
如果参数为字符串，那么它会在已有的事件(_events)中寻找是否已经存在相同的事件，如果没有会创建并初始化为空数组同时将传递的第二个参数也就是事件被触发时需要执行的回调函数添加进去。

$on方法

总结：$on方法允许为多个事件绑定同一个回调函数，还在里面使用了递归自己日自己

$emit 触发事件

Vue中的$emit是一种触发事件的方法。

它接受的第一个参数是一个字符串类型，这个字符串参数也就是需要触发的事件名称，第二个参数是触发事件时需要传递的数据。

第一步$emit会将传递的事件名称转换成小写，并进行一系列的检查判断是否符合语法标准，然后它会在事件列表(_events)中寻找事件对应的回调函数，也就是在$on中传递并添加的回调函数，这里如果没有找到会直接返回，找到了会先进行一次判断，判断回调函数是否大于1，如果大于就把它转换成一个数组。

这时候第一个参数事件名已经不再需要了，$emit会将其舍弃，并把剩下的数据转换成数组。传递给一个带有try&catch的invokeWithErrorHandling()方法，并在其中使用apply()或call()来调用事件回调函数。

调用invokeWithErrorHandling方法

invokeWithErrorHandling()方法源代码

invokeWithErrorHandling方法

总结：用$emit方法触发事件允许一个事件有多个回调函数，它们会变成数组被遍历，同时也允许携带参数，它使用了apply()或call()更改this指向来保证参数有效

(注意：看源代码可以发现如果回调函数中有返回(return)，invokeWithErrorHandling()方法是能拿到并会返回res，但是$emit中没有对这个返回的res进行赋值。)

最后

我的博客
微信公众号： 春水煎茶眠听雨
别看了，这里我实在不知道写什么好了