目录导航

本节的示例代码如下

parse

div开始标签的解析

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

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

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

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

    框红二的位置调用start函数

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

（type为1；attrsList是a处打印的attrs；attrsMap则是对attrs过滤，只留下name和value构成一个新的数组  ）

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

    start执行完毕。再次进入while循环，匹配到结束标签</button>和</div>

button结束标签的解析

    当匹配到</button>时将调用parseEndTag函数

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

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

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

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

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

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

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

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

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

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

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

button开始标签的解析

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

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

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

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

（parent指向父的ast节点div）

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

div结束标签解析

    和button按钮的处理如出一辙

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