vue 中$emit和$on实现原理

[okboy5555]

$on

$on调用时需要两个参数，第一个是字符串或数组类型作为事件的名称，第二个是触发事件执行的回调函数。
$on第一步会对第一个参数做一个是否为数组的判断，这里可以看出$on允许为多个事件绑定同一个回调函数。
如果参数为数组，那么它会使用for遍历这个数组，并进行递归。
如果参数为字符串，那么它会在已有的事件(_events)中寻找是否已经存在相同的事件，如果没有会创建并初始化为空数组同时将传递的第二个参数也就是事件被触发时需要执行的回调函数添加进去。
$on方法允许为多个事件绑定同一个回调函数

$emit

它接受的第一个参数是一个字符串类型，这个字符串参数也就是需要触发的事件名称，第二个参数是触发事件时需要传递的数据。
第一步$emit会将传递的事件名称转换成小写，并进行一系列的检查判断是否符合语法标准，然后它会在事件列表(_events)中寻找事件对应的回调函数，也就是在$on中传递并添加的回调函数，这里如果没有找到会直接返回，找到了会先进行一次判断，判断回调函数是否大于1，如果大于就把它转换成一个数组。
这时候第一个参数事件名已经不再需要了，$emit会将其舍弃，并把剩下的数据转换成数组。传递给一个带有try&catch的invokeWithErrorHandling()方法，并在其中使用apply()或call()来调用事件回调函数。