vue2 源码笔记 AST

vue模板编译过程

解析

将模板字符串解析生成 AST,解析过程中会使用正则表达式对模板顺序解析，当解析到开始标签、闭合标签、文本的时候都会有相对应的回调函数执行，来达到构造 AST 树的目的。

生成的AST 元素节点总共有 3 种类型，1 为普通元素， 2 为表达式，3为纯文本

AST

template会被编译成AST，AST是对源代码的抽象语法结构的树状表现形式，babel，webpack，css预处理，eslint等都应用到了AST树 AST会经过generate得到render函数，render的返回值是VNode，VNode是Vue的虚拟DOM节点，在_update的时候，经过patch与之前的VNode节点进行比较，得出差异后将这些差异渲染到真实的DOM上。

createCompiler

createCompiler用以创建编译器，返回值是compile以及compileToFunctions。compile是一个编译器，它会将传入的template转换成对应的AST

因为不同平台有一些不同的options，所以createCompiler会根据平台区分传入一个baseOptions，会与compile本身传入的options合并得到最终的finalOptions。

compileToFunctions 带缓存的编译器

compile 将模板template编译成AST、render函数以及staticRenderFns函数

baseCompile

function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  /*parse解析得到AST*/
  const ast = parse(template.trim(), options)
  /*将AST进行优化 */
  optimize(ast, options)
  /*根据AST生成所需的code（内部包含render与staticRenderFns）*/
  const code = generate(ast, options)
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
}

baseCompile首先会将模板template进行parse得到一个AST，再通过optimize做一些优化，最后通过generate得到render以及staticRenderFns。

parse

parse会用正则等方式解析template模板中的指令、class、style等数据，形成AST。

optimize

optimize的主要作用是标记static静态节点，这是Vue在编译过程中的一处优化，后面当update更新界面时，会有一个patch的过程，diff算法会直接跳过静态节点，从而减少了比较的过程，优化了patch的性能。

generate

generate是将AST转化成render funtion字符串的过程，得到结果是render的字符串以及staticRenderFns字符串。

---

至此，我们的template模板已经被转化成了我们所需的AST、render function字符串以及staticRenderFns字符串。