聊聊Vue.js的template编译的问题

 compile

 /*编译，将模板template编译成AST树、render函数以及staticRenderFns函数*/
 function compile (
  template: string,
  options?: CompilerOptions
 ): CompiledResult {
  const finalOptions = Object.create(baseOptions)
  const errors = []  const tips = []  finalOptions.warn = (msg, tip) => {
   (tip ? tips : errors).push(msg)
  }
  /*做下面这些merge的目的因为不同平台可以提供自己本身平台的一个baseOptions，内部封装了平台自己的实现，然后把共同的部分抽离开来放在这层compiler中，所以在这里需要merge一下*/
  if (options) {
   // merge custom modules
   /*合并modules*/
   if (options.modules) {
    finalOptions.modules = (baseOptions.modules || []).concat(options.modules)
   }
   // merge custom directives
   if (options.directives) {
    /*合并directives*/
    finalOptions.directives = extend(
     Object.create(baseOptions.directives),
     options.directives
    )
   }
   // copy other options
   for (const key in options) {
    /*合并其余的options，modules与directives已经在上面做了特殊处理了*/
    if (key !== 'modules' && key !== 'directives') {
     finalOptions[key] = options[key]    }
   }
  }
  /*基础模板编译，得到编译结果*/
  const compiled = baseCompile(template, finalOptions)
  if (process.env.NODE_ENV !== 'production') {
   errors.push.apply(errors, detectErrors(compiled.ast))
  }
  compiled.errors = errors
  compiled.tips = tips
  return compiled
 }

compile主要做了两件事，一件是合并option（前面说的将平台自有的option与传入的option进行合并），另一件是baseCompile，进行模板template的编译。

来看一下baseCompile

baseCompile

function baseCompile (
 template: string,
 options: CompilerOptions
): CompiledResult {
 /*parse解析得到ast树*/
 const ast = parse(template.trim(), options)
 /*
  将AST树进行优化
  优化的目标：生成模板AST树，检测不需要进行DOM改变的静态子树。
  一旦检测到这些静态树，我们就能做以下这些事情：
  1.把它们变成常数，这样我们就再也不需要每次重新渲染时创建新的节点了。
  2.在patch的过程中直接跳过。
 */
 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。