We were in theLearn vue source code (4) handwritten VM.$mount methodThe compile function converts a template into a rendering function,


But instead of talking about the implementation, let’s do it this time.

Let’s talk about how template compilation works.

Overview of template compilation principle

(1) Templates are not the only way to create HTML in vue.js. You can either write rendering functions manually to create HTML, or you can use JSX in vue.js to create HTML.

(2) Rendering functions are the most primitive way to create HTML.

(3) The template will eventually be converted into a rendering function through compilation. After the rendering function is executed, a VNode will be obtained for virtual DOM rendering. So template compilation is actually rendering with the virtual DOM.

(4) Template compilation is how to get the virtual DOM to vNode. (Template — template compilation — Rendering function (template compilation) — VNode — User Interface (virtual DOM))

(5) Vue.js provides template syntax, allowing declaratively describing the binding relationship between state and DOM, and then generating the real DOM through the template and presenting it on the user interface.

(6) In the underlying implementation, vue. js will compile the template into a virtual DOM rendering function. Vue.js, combined with a responsive system, can intelligently find the minimum number of components to re-render and the minimum number of DOM manipulations when state changes within an application.

Ii. Principle and concept of template compilation

(1) When using templates, you can use some variables in the template to fill the template, you can also use Javascript expressions in the template, or use some instructions, etc. These capabilities do not exist in HTML syntax, thanks to the power that template compilation gives templates.

(2) The main goal of template compilation is to generate the rendering function. What the render function does is that each time it executes, it generates a new vNode with the current state, and then renders it with that VNode.

Compile the template into a rendering function

(1) Template compilation is divided into three parts

1. Parse the template into an AST. Abstract Syntax Tree.

2. Traverse the AST to mark static nodes.

3. Use AST to generate rendering functions.

(2) with the static nodes do not need always to render, so after produce AST, generate rendering function before this node, you need to do an operation, it is said that traverse the AST again, to do a tag all static nodes, this update in the virtual DOM node, if found this tag, the node will not render it again.

(3) These three parts are abstracted into three modules to realize their respective functions in template compilation, respectively

1. Parsers.

2. Optimizer.

Code generators.

Parsers

(1) Function: Parse templates into AST.

(2) Within the parser, there are many small parsers, including filter parser, text parser, and HTML parser. These parsers are then assembled together through a single thread.

(3) When using templates, we can use filters in them, and the filter parser is used to parse filters.

(4) Text parsers are used to parse text. Its main function is to parse text with variables. Text without variables is plain text and does not need to be parsed using a text parser.

Hello {{name}}
Copy the code

5) HTML parser, it is the most core module in the parser, its role is to parse templates, every time the parsing to the start of the HTML tag, the end of the text or comments, will trigger the hook function, and then pass the relevant information through parameters.

(6) What the main line does is listen to the HTML parser. Each time the hook function is triggered, a corresponding AST node is generated. Before generating AST nodes, the AST is generated in different ways based on the type. For example, if it is a text node, an AST of text type is generated.

(7) This AST is similar to vNode in that it uses Javascript objects to represent nodes.

(8) When the HTML parser has parsed all the templates, the AST is generated.

Objective: To traverse the AST, detect all static subtrees (DOM nodes that never change) and mark them.

(2) When the static subtrees in the AST are marked, there is no need to create new virtual nodes for the marked static nodes, but directly clone the existing virtual nodes.

(3) In the virtual DOM update operation, if two nodes are found to be the same, they will be updated under normal circumstances. However, if these two nodes are static nodes, the node update process can be directly skipped.

(4) The main function of the optimizer is to improve performance by avoiding unnecessary effort. Because static nodes are rendered for the first time, no subsequent re-rendering operations are required.

Code generators

(1) It is the last step in template compilation and is used to convert the AST into the content of the rendering function, which can be called a “code string”.

<p title="Berwin" @click="c">1</p>
Copy the code

Generated code string:

with(this) { return _c(
  'p'.  {
   attrs: {"title""Berwin"},
 on: {"click":c}  },  [_v("1")]  ) } Copy the code

(2) When such a code string is finally exported for external use, it is put into a function called the render function.

(3) When the render function is exported, template compilation is complete.

const code = 'with(this){return 'Hello Berwin'} ';
const hello = new Function(code);
hello();
//Hello Berwin
Copy the code

(4) The rendering function is used to create a VNode. Rendering functions can generate vNodes because there are many function calls in the code string (for example, the above generated code string has two function calls _c and _v) that are methods provided by the virtual DOM to create a VNode.

(5) There are many types of vnodes, and different types correspond to different creation methods. Therefore, _c and _v in the code string are actually methods to create vnodes, but the types of vNodes are different. For example, _c can create vNodes of the element type, while _v can create vNodes of the text type.

This article is formatted using MDNICE