vue event 源码浅析

编译

1、事件的编译是通过processAttrs这个方法来处理的；
2、通过正则匹配元素绑定的事件类型、修饰符、对应的值；
3、addHandler 函数，根据 modifier 修饰符对事件名 name 做处理，处理普通事件和原生事件，对name 做归类，返回处理后的AST；
4、根据 AST 元素节点上的 events 和 nativeEvents 生成 data 数据；

编译流程图如下

Xnip2019-04-18_21-59-04.jpg

DOM 事件

1、DOM事件是对原生事件的处理，最终通过原生的addEventListener 和removeEventListener 来实现监听和移除监听；
2、updateListeners 的时候，会比较新旧事件回调的方法，如果存在只是改变引用，如果为新添加，则add，如果移除事件则remove;

Xnip2019-04-18_22-45-12.jpg

自定义事件

父子组件事件交互

1、通过修饰符 区分native 还是非native 事件，非native事件赋值给listeners，native 事件赋值给data.on;
2、data.on 事件的处理走上面原生DOM事件处理方式；
3、listeners 通过对子组件添加_parentListeners；
4、父组件通过updateListeners 的add move 来添加绑定事件，主要应用事件中心来实现；

20190419112701.png

事件中心

20190419120233.png