大前端【3-2】Vue模板编译的过程

模板编译的主要目的是将模板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对应的属性中