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

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

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

事件中心

网友评论