模版编译的主要目的:将模版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)