模板编译的主要目的是将模板template转化为渲染函数render
抽象语法树:AST,使用对象的形式描述树形的代码结构
模板编译是将模板字符串首先转化为AST对象,然后优化AST对象,优化的过程是在标记静态根节点,然后吧优化号的AST对象转化为字符串形式的代码,最终把字符串形式代码通过newFunction转化为匿名函数,这个匿名函数就是最终生成的函数render函数,模板编译就是啊模板字符串转化为渲染函数。
入口函数,compileToFunctions(template.....)
1、check cache
先从缓存中加载编译好的render函数, 读取缓存中的CompiledFunctionResult对象,如果有直接返回,缓存中没有,则调用compile(template,options)
2、compile
合并options, baseCompile(template.trim(),finalOptions)
3、 baseCompile(template.trim(),finalOptions)
- parse(),将模板字符串首先转化为AST对象
- optimize()
- 标记AST tree中的静态sub trees
- 检测到静态子树,设置为静态,不需要在每次重新渲染的时候重新生成节点
- patch阶段跳过静态子树
- generate(),AST tree生成js的创建代码
4、compileToFunctions(template…)
-
继续把上一步中生成的字符串形式js代码转化为函数
-
createFunction()
-
options.render = render
options.staticRenderFns = staticRenderFns
render和staticRenderFns 初始化完毕,挂载到vue实例的options对应的属性中