|

Aimee

Write the Code. Change the World.

vue event 源码浅析

· 分享镜#vue

编译

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 来添加绑定事件,主要应用事件中心来实现;

图片名称

事件中心

图片名称

评论3

登录后参与评论。

  • 游客

    1

  • 游客

    1

  • 些先d品要屋_nI
    些先d品要屋_nI回复

    111

回到顶部