美文网首页
vue event 源码浅析

vue event 源码浅析

作者: aimee66 | 来源:发表于2019-04-30 14:24 被阅读0次

编译

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

相关文章

网友评论

      本文标题:vue event 源码浅析

      本文链接:https://www.haomeiwen.com/subject/uyqvnqtx.html