vue源码解读--event(原生事件-parse)

目录导航

本节的示例代码如下

parse


div开始标签的解析


    经过之前对编译的分析,parse的过程将会执行parseHTML对template对应的html字符串进行遍历处理,并在正则匹配到开始标签时执行parseStartTag函数对标签中的属性进行处理(A)

 标红的位置将匹配到标签中的@click="onRootConsole",match.attrs为(B)

vue源码解读--event(原生事件-parse)_第1张图片

    将match返回,回到parseHTML,执行handleStartTag函数

vue源码解读--event(原生事件-parse)_第2张图片

    框红一的位置将match中的attrs数据转换成了键值对的形式(a)(C)

vue源码解读--event(原生事件-parse)_第3张图片

    框红二的位置调用start函数

vue源码解读--event(原生事件-parse)_第4张图片

    在框红的位置调用createASTElement创建ast节点

vue源码解读--event(原生事件-parse)_第5张图片
(type为1;attrsList是a处打印的attrs;attrsMap则是对attrs过滤,只留下name和value构成一个新的数组  )

    此时div的ast节点如下(D)

vue源码解读--event(原生事件-parse)_第6张图片

    start执行完毕。再次进入while循环,匹配到结束标签和


button结束标签的解析


    当匹配到时将调用parseEndTag函数

vue源码解读--event(原生事件-parse)_第7张图片

    在框红的位置调用end函数并执行closeElement对标签进行加工

vue源码解读--event(原生事件-parse)_第8张图片

    在框红的位置调用processElement,这其中包含了对属性的处理即processAttrs函数

vue源码解读--event(原生事件-parse)_第9张图片

    框红一的位置,将hasBindings置为true,标识这是一个动态节点,在codegen过程中将被作为判断条件选择是否打static标记

    框红二的位置,拿到我们的修饰符stop和prevent,并处理成对象形式(E)

    框红三的位置,对name进行处理,它将把修饰符拿掉只保留v-on:click

    框红四的位置,进一步将name处理,将v-on处理掉只保留click,接着调用addHandler为向ast节点添加事件描述

vue源码解读--event(原生事件-parse)_第10张图片

    框红一的位置,拿到事件修饰符E并

    框红二的位置,由于当前事件为原生dom事件,故向节点添加events对象作为事件描述

    框绿的位置,向events添加成员,key为事件类型,value为事件描述(F)

vue源码解读--event(原生事件-parse)_第11张图片

    框红三的位置,对数组类型进行处理,因为vue允许{clickName:handleName}或"handleOne;handleTwo"的形式定义事件

    最红得到的button带有事件描述的ast节点如下

vue源码解读--event(原生事件-parse)_第12张图片

button开始标签的解析


    根据之前分析,html在解析过程中会被slice掉。故下一次将进入button按钮的解析过程,这将和div的过程如出一辙。

    在A处调用parseStartTag,在B处输出为

vue源码解读--event(原生事件-parse)_第13张图片

    执行handleStartTag函数,在C处输出为

vue源码解读--event(原生事件-parse)_第14张图片

    调用start执行createASTElement创建ast节点,在D处输出为

vue源码解读--event(原生事件-parse)_第15张图片
(parent指向父的ast节点div)

故最终生成的ast tree如下,他们通过parent和children构建树关系


div结束标签解析


    和button按钮的处理如出一辙

    调用parseEndTag--调用end--调用closeElement--调用processElement--调用processAttrs--调用addHandler,在该函数中向ast节点标记events属性,它是一个对象引用,包含事件名称和value修饰符

vue源码解读--event(原生事件-parse)_第16张图片

你可能感兴趣的:(vue源码解读--event(原生事件-parse))