本节的示例代码如下
(tips:双横线包裹的部分将在文章中重复出现，指向横线内部的代码部分)
template模板参数
这将在最终作为baseHtml进行解析
<main id="app">
<!-- 对于true则渲染list结构，否则渲染p标签 -->
<ul v-if="isList">
<li v-for="(v,i) in list" :key="i">{{v}}</li>
</ul>
<p :class="!isList?'toRed':''" v-else>p标签</p>
<br/>
<button @click="isList = !isList">change tag type</button>
</main>
advance函数
这将针对baseHtml进行截取，如n=5，则截取后的下一轮的html为"id='app'>...</main>"
function advance (n) {
index += n
html = html.substring(n)
}
dynamicArgAttribute
/^\s*((?:v-[\w-]+:|@|:|#)\[[^=]+?\][^\s"'<>\/=]*)(?:\s*(=)\s*(?:"([^"]*)"+|'([^']*)'+|([^\s"'=<>`]+)))?/
定位断点
上一节我们通过简单分析，找到了编译的入口，即compileToFunctions函数，故将断点定位与此，入参为：template模板参数、配置对象、组件实例
通过Object.create使cache拥有访问原型链的能力，cache中保存着编译后的模板，为了避免重复编译，在此作缓存，并在第二次组件init时直接返回。且该处利用函数柯里化技巧将cache作保留避免了每次都获取一次
调用extend方法将传入的配置对象copy一份
拿到warn函数，这将在编译出错时向用户输出一些警告信息以助其调试
判断当前浏览器环境是否支持new Function api，因为编译后的代码是需要借此转换为可执行code的。显然在现代浏览器中，必然是支持的
判断cache中是否已经存在同样的模板key，避免重复编译
调用compile对模板进行解析并生成ast树之后进行一些优化处理，入参为：template模板参数、配置对象
调用parse，入参为：template模板参数、配置对象
拿到warn函数，这将在解析出错时向用户输出一些有用的信息
接着判断一些特殊标签：pre、svg、input、textarea、option、select、progress、math（如input标签，如果写了value属性那么必须写全value="某个值"）；判断是否是html保留标签以及是否可能是组件
获取一些平台相关的modules。比如对事件的处理，slot的处理等
定义stack，这将维护一颗解析栈
定义一些辅助函数，warnOnce、closeElement、trimEndingWhitespace、checkRootConstraints。这将在解析过程中适当的实际被调用
调用parseHTML，这将是解析的核心函数，入参为:template模板参数、配置对象
进入parseHTML函数
定义stack，这将缓存解析出来的标签name
index=0，这将作为step的基数，向html字符串中移动指定的位数
last则是当前次的html模板
lastTag是当前次的html tag name
进入while循环
last是template模板参数，lastTag默认为undefined，进入判断逻辑
判断<在模板中的位置，对于当前的<main ...>而言为0进入判断
判断是否是注释节点如<!-- 对于true则渲染list结构，否则渲染p标签 -->,如果是且并非一个保留的注释节点（因为组件会被渲染为一个注释节点），那么则调用advance函数
判断是否是条件注释如[if IE]>输出一些提示信息<![endif]，如是则调用advance函数
判断是否是Doctype节点，是则调用advance函数
调用parseStartTag，判断开始标签，并最终调用advance函数
html.match匹配到开始标签，捕获组为[<main,main],进入if判断
match={tagName:<main,attrs:{},index:0}
调用advance，那么执行后的html为"id='app'>...</main>"
执行while循环判断
html.match(startTagClose),startTagClose指向/^\s*(\/?)>/，其中^表示以某个值开头,\s表示空白字符,*表示一次或多次，()表示分组，?表示有或者没有；因此整句的含义是匹配一串文本，该文本要么以空格开头要么以/开头。如<br/>或<br />或>或 >都可以被匹配到。故在第二次即main标签的结束符">"将被匹配
html.match(dynamicArgAttribute),dynamicArgAttribute指向本文头部定义，表示匹配在标签中定义的属性，这些属性可能是只被vue识别的写法，如:bind/v-bind/v-else，当前的main标签没有动态值，故当前始终为false
html.match(attribute),表示匹配html属性，对应id="app"将被匹配。
第一次执行属性匹配进入循环，我们看到vue先保留了index(当前为5)，后前进id="app"的长度后为14，即将id="app"从html上截取掉了。此时的html为" >...</main>"。后向match的attr上缓存了匹配值，即id="app"、id、"="、"app"。
再次进入循环，显然" >"符合匹配，但是由于后两个不匹配故跳出循环，但是end已经被赋值，故进入判断并前进一位，此时html为"<!--...<main>"
返回parseHTML函数，执行handleStartTag。入参为{tagName:"main",attrs:[id=app,id,=,app],start:0,end:15}
框红一的位置对一些特殊标签进行处理，如p标签内不能嵌套p或div等标签。如果用户书写了这样的嵌套，则vue会帮我们进行处理
框红二的位置针对attrs属性进行了处理，在我们当前的执行处，在attrs属性上挂载了一个对象{name:"id",value:"app",start:6,end:14}
options.outputSourceRange是在入口处传入的在开发环境为true，故进入判断，在attrs的当前次对象上添加start和end。此时的attrs=[{name:"id",value:"app",start:6,end:14}]。也就是说，attrs保存了一份属性在标签上的描述符，对当前而言，含义为在标签上存在一个属性id值为app，它存在与html字符串的第6到第14的位置
当前的main不是一个单标签，故进入条件向stack推一份，[{attrs:{name:"id",value:"app",start:6,end:14},tag:"main",lowerCasedTag:"main",start:0,end:15}]
lastTag=main
调用start生成ast节点
返回parseHTML函数，结束掉当前次循环。继续下一次html遍历。本次将查找到添加的注释，由于存在换行符和空格，故textEnd=3，向下进入逻辑对html截取空格并向下调用chars进行文本节点处理。由于当前的text不保留故不处理。进入下一次循环，当前为<ul>标签，本次将再次生成attrs去描述ul上定义的属性并将其push到stack当中。之后再次回到parseHTML函数，此时stack为[main、ul、li]，本次将查找到结束标签即</li>,执行parseEndTag函数
框红1的位置，去查找是否stack中存在我们当前的标签
框红2的位置，则判断是否存在未闭合的标签。因为在正确的html书写中，内部的标签一定是先闭合的，同时while(html)的截取是从外到内从头到尾的，故stack的第一个在正常情况下一定是相等的，若否，则说明未正确闭合
stack.length=2则将最后一位删除，即去除li，故lastTag为main
调用createFunction将编译后的信息通过new Function api转为可执行的code并挂载到render上，这样在render函数中将会被拿到并执行
因此，模板解析的过程其实就是去遍历template对应的html字符串，拿到每一个标签使用正则的方式获取定义的属性，每解析完一个就对已解析的部分截取，然后创建一个ast树，直到全部解析完的过程
