HuazhuLi
commented
7 years ago parser，也叫解释器，在vue.js里，parser所做的事情很简单，就是把模版里层层嵌套的dom结构，转换成一个parent属性为空，而有children属性的的ASTElement，这个ASTElement，vue里边把它命名为根（root）。
（ast，也就是我们常说的，抽象语法树，后文提到的ASTElement,ASTExpression,ASTText，都是抽象语法树上面的节点，上文提到的root，就是一个ASTElement。）
由于parser在最后，只会返回一个ASTElement，如上文提到的那样，这个ASTElement叫做root，它的parent属性为空，只有child属性。 （所以在这里，我们知道了，为什么vue.js需要我们在template模版最外层，必须安排一个根节点；假设你不这么干，你在template里面写了div1 div2 div3节点，然后vue会怎么做呢？他会遍历div1的dom结构，并且返回div1这个标签对应的ast作为root，最后直接跳过div2 div3；） todo：这段有待商榷
过程简介
就如我们第一章讲的那样： parse这个过程，就是把template转成ast的过程，这个过程并非一蹴而就，而是分为好几个子过程：
为了说明这个过程，笔者在此以下面的模版作为例子：
对于这个模版，parser做了以下的几步：
第一步：parser调用html parser（一个开源的html解释器，作者是John Resig），并且给html parser传入四个函数，分别start() end() chars() comment(); 这个解释器原理比较简单，解析的主要过程是：
这个parser在于遇到开始标签的时候，举个例子：
，他就会调用一个对应的函数start()，这个函数（vue作者定制）会生成一个ASTElement，记录节点 tagName, attributes 等信息； 这个parser在遇到结束标签的时候，举个例子
，他就会调用对应的函数方法end()； 这个parser在遇到开始标签和结束标签之间的内容时候，就会调用一个方法char()； 在遇到注释时，会调用对应的comment()函数；了解这四个函数，是理解其生成的三种ast节点的关键；
ASTNode
上文提及到的四个函数，直接生成了三种ast节点，这三种ast类型如下：
-ASTElement -ASTText -ASTExpression
对应地看一下 Vue 2.0 源码中 AST 数据结构 的定义： img
注意：为了避免文章过长，我在以上的代码中注释了 ASTElement 中的许多属性，点击上方 AST 数据结构的链接可查看完整代码。
img
ASTExpression & ASTText
function name & function involved
ASTElement & VUE指令编译优先级
只要在调用char()方法的时候，vuejs才会生成astelement以及astexpression，否则都是生成astelement （图示）
2.convert node to ast 对as
理解ast的三种类型 以及对应的html代码
编译的优先级 每一个指令对应的parse过程
为什么会出现编译优先级的问题
区分更改代码／重新销毁／在使用中我们只更改数据
说说function调用判断逻辑
在大部分时间里，我们使用vue.js，几乎必然都是在使用vue的模版功能； 在初学vue的时候，每当编译报错时，笔者第一反应就是：没按照官方文档写（这是DSL (Domain-Specific Language, 领域特定语言）带来的一些问题）；
vue 的模版简单易用，但是由于有些开发者不能完全知晓内部的处理逻辑，会显得有点“黑魔法”， 所以笔者特意去阅读了vue的源码，来了解vue到底为我们开发者提供了何种便利，能让我们舒服自然地进行声明式编程；
在开始阅读compile这部分的源码之前，首先我们想知道的是：vue的compile部分，在vue实例化过程中，起着怎样的作用？ 其实，在vue里面写render function，或者说使用jsx写法的时候，是不需要经过compile这部分的。 compile代码，只做了一件事：把template转成render function。
在vue实例创建完成以后（created后），首先会检测有没有el选项，有的话就把对应的outerHTML取出来， 并且当作template来处理；如果没有，就检测有没有template选项； 完成以上操作以后，开始了compile这一阶段。 （使用render function 和 template的区别，也是使用独立构建和运行时构建的区别。这在后面会提及） 放一张Vue的生命周期图：
在上图，我们可以清晰地看到：compile发生在created和mounted的时间点之前，那问题来了，在这个阶段，一个Vue实例到底经历了什么？ 或者说，template要转成render function，需要哪些步骤？
（首先，我们必须先确定正在讨论的问题，因为vue2以及vue1的compile阶段，差别较大；所以在本文，我们只讨论vue2的compile阶段）
compile部分文件结构以及对应作用如下：
compile |——parser （template -> ast) |——index.js（入口文件） |——text-parser.js（对ast里面的ASTTEXT & ASTEXPRESSION进行判断以及处理） |——html-parser.js （对template里面的dom树进行遍历操作） |——filter-parser.js （对template的filter进行解析） |——entity-decoder.js |——codegen (optimized ast -> render function) |——events.js |——index.js |——directives (对特殊指令的一些处理） |——bind.js |——index.js |——model.js |——on.js |——creatCompiler.js（创造compile实例） |——error-detector.js |——helpers.js（公用函数库） |——optimizer.js（ast -> optimized ast) |——index.js(入口文件） |——to-function.js
在compile这个过程里，框架主要做了三件事： 1.parse（解释template，使其转成ast） 2.optimize（优化ast） 3.code generate（把ast转成render function）
结束这三个过程以后，我们得到了render function（渲染函数）；render function会渲染出VNODE（也就是virtual dom的节点） （至于template为什么要被编译成render function，以及vue为何支持jsx，我们在稍后会提及相应的内容，我们先把精力放在compile这部分的源码上）
附上一张compile/index.js里的compile函数调用图：
（在vue.js 2.4里，作者在部分函数里使用typescript，以上的typescript其实很好懂：typescript需要对函数的参数，以及函数的返回值，定义类型； 在以上函数，函数的参数 template／options 分别是string类型和compileroptions类型； 返回值类型，是compiledresult。）
简而言之，creatCompilerCreator函数接受baseCompile函数为参数，而后者又调用了parse／optimize函数／generate函数； 最后把值返回给creatCompiler。
这一流程简单的图示如下：
解说版： v-text指令冒险记
v-text指令经过parse里面的html parser，htmlparser读到了
&
，于是调用了parser里的start和end方法，这两个方法，生成了 一个astelement，这个astelement里面有directive这个属性，里面有v-text这个指令作为属性名以及对应的值；然后在经过optimize这一阶段，这个astelement被标记成static（静态的）
最后经过codegen，这个astelement被输出成staticrenderfn（静态渲染函数）
然后这个static render function会渲染出一个虚拟dom节点，也就是VNODE这种数据结构，最后virtual dom tree会和之前的virtual dom tree进行diff，把diff的结果patch到实际的dom节点上，完成了下图过程。