[vue] Vue template compilation process

1. What is template compilation

Second, the overall rendering process

The so-called rendering process is to reflect the original template written by the user HTMLinto the view through a series of processing, which is called the entire rendering process. The flow chart is as follows:

We can also see from the figure that the template compilation process is the process of generating a renderfunction after a series of processing of the template written by the user .

3. Internal process of template compilation

So how does the template compilation process the template written by the user to finally generate renderthe function? What is the internal process like?

3.1 Abstract Syntax Tree AST

We know that <template></template>the template pair written by the user in the tag Vueis a bunch of strings, so how to parse this bunch of strings and extract effective information such as element tags, attributes, variable interpolation, etc.? This requires the help of something called an abstract syntax tree.

Use the most intuitive example to understand what an abstract syntax tree is. Please see the figure below:

From the figure we can see that the code of a simple HTML tag is converted into a JS object, and the attributes in this object represent some key valid information in this tag.

3.2 Specific process

After parsing a bunch of string templates into abstract syntax trees AST, we can perform various operations on them, and use the processed ones ASTto generate renderfunctions. The specific process can be roughly divided into three stages:

1. Template parsing phase: Parse a bunch of template strings into an abstract syntax tree with regular expressions AST;
2. Optimization stage: traverse AST, find out the static nodes, and mark them ;
3. Code generation stage: will be ASTconverted into a rendering function;

These three stages correspond to three modules in the source code respectively. The paths of the source codes of the three modules in the source code are given below:

1. Template parsing phase - parser - source path: src/compiler/parser/index.js;
2. Optimization stage - optimizer - source code path: src/compiler/optimizer.js;
3. Code Generation Phase - Code Generator - Source Path: src/compiler/codegen/index.js;

The corresponding source code is as follows:

// 源码位置: /src/complier/index.js

export const createCompiler = createCompilerCreator(function baseCompile (
  template: string,
  options: CompilerOptions
): CompiledResult {
    
    
  // 模板解析阶段：用正则等方式解析 template 模板中的指令、class、style等数据，形成AST
  const ast = parse(template.trim(), options)
  if (options.optimize !== false) {
    
    
    // 优化阶段：遍历AST，找出其中的静态节点，并打上标记；
    // 优化的目标：生成模板AST树，检测不需要进行DOM改变的静态子树。一旦检测到这些静态树，我们就能做以下这些事情：
    // 1.把它们变成常数，这样我们就再也不需要每次重新渲染时创建新的节点了
    // 2.在patch的过程中直接跳过
    optimize(ast, options)
  }
  // 代码生成阶段：将AST转换成渲染函数；
  const code = generate(ast, options)
  return {
    
    
    ast,
    render: code.render,
    staticRenderFns: code.staticRenderFns
  }
})

The code you can see baseCompileis very short and the main core code.

• const ast =parse(template.trim(), options): parseIt will use regular methods to templateparse the instructions , class , style and other data in the template to form AST.
• optimize(ast, options): optimizeThe main function of is to mark static nodes , which is an optimization Vuein the compilation process. During patchthe process of blocking, the DOM-Diffalgorithm will directly skip the static nodes, thereby reducing the comparison process and optimizing the patchperformance.
• const code =generate(ast, options):The process of ASTconverting to a renderfunction string, the result is a renderfunction string and a staticRenderFnsstring.

baseCompilefinal return value

{
    
    
 	ast: ast,
 	render: code.render,
 	staticRenderFns: code.staticRenderFns
 }

Finally, the abstract syntax tree ( ast), rendering function ( render), and static rendering function ( staticRenderFns) are returned, and the value of render is the value of code.render, which means that the return value obtained after processing is an object.staticRenderFnscode.staticRenderFnsgenerateastcode

The specific flow chart of the template compilation is given below for easy understanding. The flow chart is as follows:

vue official website description

Recommended reading: Vue source code: three stages of template compilation