Vue源码解析——模版编译

模版编译的主要目的：将模版template转换为渲染函数render

即template => render()

模版编译必要性

Vue 2.0需要用到VNode描述视图以及各种交互，手写显然不切实际，因此用户只需编写类似HTML代码 的Vue模板，通过编译器将模板转换为可返回VNode的render函数。

体验模版编译

带编译器的版本中，可以使用template或el的方式声明模板。

compiler.html

(function anonymous(
){
with(this){return _c('div',{attrs:{"id":"demo"}},[_c('h1',[_v("Vue模板编 译")]),_v(" "),_c('p',[_v(_s(foo))]),_v(" "),_c('comp')],1)}
})

输出结果大致如下：

(function anonymous() {
with(this){return _c('div',{attrs:{"id":"demo"}},[
_c('h1',[_v("Vue模板编译")]), _v(" "),_c('p',[_v(_s(foo))]), _v(" "),_c('comp')],1)}
})

整体流程

compileToFunctions

若指定template或el选项，则会执行编译，platforms\web\entry-runtime-with-compiler.js

解析模板编译过程

• 解析
• 优化
• 生成

1、解析 ：解析器将模板解析为抽象语法树AST，基于AST可以做优化或者代码生成工作。 调试查看得到的AST，/src/compiler/parser/index.js，结构如下:

解析器内部分了HTML解析器、文本解析器和过滤器解析器，最主要是HTML解析器

2、优化：优化器的作用是在AST中找出静态子树并打上标记。静态子树是在AST中永远不变的节点，如纯文本节点。

标记静态子树的好处：都可以复用，不需要重新渲染；虚拟DOM中patch时，可以跳过静态子树。

3、代码生成 ： 将AST转换成渲染函数中的内容，即代码字符串。只需要new Function(code)