3 / 25 源码中 template 模板是怎样通过 Compile 编译的

前面的话

前端日问，巩固基础，不打烊！！！

解答

相信大家都知道虚拟DOM是由render函数生成，那么render函数是如何来的呢？

答案： 是由template模板编译而来。

看一下源码中是如何实现的：

// src/compiler/index.js

export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
  const ast = parse(template.trim(), options)
  if (options.optimize !== false) {
    optimize(ast, options)
  }
  const code = generate(ast, options)
  return {
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
})

总结：

• parse函数：通过正则表达式解析模板中的指令，生成AST抽象语法树
• optimize函数：优化AST，标记静态的（不需要修改的DOM）节点。diff算法更新时，会跳过静态节点，减少比较的过程，优化patch的性能
• generate: 将AST生成render函数