1.模版编译入口

Vue源码-模版编译过程 - 图1

2.模版编译过程流程图

Vue源码-模版编译过程 - 图2

3. 模版编译过程概述

  1. 通过模版编译入口函数compileToFunctions从缓存中加载编译好的render函数,首先判断是否有缓存好的render函数，如果没有，则调用compile。compile用作于合并options, 它将用户传入的options和初始化的options合并起来。然后将template和合并好的options传递给baseCompile。
  2. 在 baseCompile 中完成了模版编译的核心部分:
    • 调用parse()将template转换成AST对象；
    • 调用optimize()优化 AST tree；
    • 调用 generate() 将优化后的AST tree转换成字符串形式的代码.
  3. 最后回到compileToFunctions，通过createFunction()将字符串形式的代码转换为函数,并将其挂载到Vue实例的options对应的属性中