The purpose of,

The purpose of template compilation is to convert the template to render

AST: Tree code structure described in object form

  • Template compilation converts string templates into AST objects
  • Optimize the AST object by marking the static root node
  • The optimized AST is converted to string form code, which is then converted to methods via newFunction
  • This method is the final render function
CompileToFunctions (template,…)
  • locationsrc/platforms/web/entry-runtime-with-compiler.js
$prototype = function (prototype) {$prototype = function (prototype) {$prototype = function (prototype); Const {render, staticRenderFns} = compileToFunctions(template, {... }, this) ... DOM return mount. Call (this, el, hydrating)}Copy the code
  • callcreateCompiler(baseOptions)
  • callcreateCompilerCreator
// `createCompilerCreator` allows creating compilers that use alternative // parser/optimizer/codegen, e.g the SSR optimizing compiler. // Here we just export a default compiler using the default parts. export const createCompiler = createCompilerCreator(function baseCompile ( template: string, options: CompilerOptions ): CompiledResult {// convert templates to AST abstract syntax tree // Abstract syntax tree Const ast = parse(template.trim(), options) if (options.optimize! > > optimize(ast, options)} const code = generate(ast, options) Options) return {ast, // render function render: code.render, // static render function, generate static VNode tree staticRenderFns: code.staticrenderfns}})Copy the code
Three, the compile (template, the options)
  • Merge the options
  • baseCompile(template.trim(),finalOptions)
Three, baseCompile (template. The trim (), finalOptions)
  • parse(template.trim(), options)Convert templates to AST abstract syntax trees
  • optimize(ast, options)
    • Mark static nodes of AST tree species
    • Static nodes detected, set to static, do not need to regenerate nodes every time you re-render
    • Patch Static skip the static node
  • generate(ast, options)The abstract syntax tree generates js code in string form
Four, compileToFunctions (template,…).
  • Continue to convert the JS code generated in the previous step into functions
  • createFunction
  • Render and staticRenderFns are initialized and mounted to properties corresponding to options of vue instance