How template compilation works

The core principle of template compilation is divided into three parts

1. Parse the HTML template into AST objects

There are HTML parsers, text parsers, filter parsers

parsing

  • Iterate through the loophtmlThe template string, in turn, processes each tag within it, and removes the attributes on the tag
  1. Process start tags, end tags, text nodes, and comment nodes
  2. Create an AST object that handles instructions on labels, V-bind, V-for, V-if, key, slot, class, style, attributes

Principles of HTML parsers

Each cut triggers different hook functions start and chars(text processing), depending on the type of string cut, until template string truncation stops running

`
      

        {{name}} 
      
`
Copy the code

On the first loop, a string

is truncated, flat, and the hook function start is triggered. The truncated result is: 
` {{name}} `
Copy the code

On the second loop, a string with Spaces is truncated

` `
Copy the code

And trigger the hook function chars(processing text) to intercept the result is:

`{{name}} `
Copy the code

And so on until a string is truncated and the hook function end is triggered.

` `
Copy the code

2. Iterate AST tags to generate static nodes

To optimize the

  • Statically mark the AST tree; It traverses the AST tree, statically marking each node, whether it is static, and further unmarking the static root node

The role of static tags

  1. There is no need to create a new node for the static subtree each time you re-render

  2. You can skip the process of patching the DOM each time you virtual it

What nodes can be marked as static

  • Text node
  • There are no V-bind, V-for, V-if instructions on the node
  • The component

3. Use AST to generate rendering functions

Generate rendering functions from the AST

Render the AST object to generate a rendering function, as we say the render dynamic rendering function, responsible for generating a dynamic node vnode; There is also a static node rendering function that generates the vNode of the static node.

A simple template

<p title="jiandan" @click="c">123</p>
Copy the code

The generated code string is


with(this){return _c('p', {attrs: {"title":"jiandan".on: {"click":c}},[_v("123")])}

Copy the code

_c hook function: VNode responsible for generating components or HTML elements; _v hook function: responsible for text content.

We then put the code string into a function called the render function

Code generation to convert the AST into an executable render function string form, string code throughnew Function(codeStr) converts to an executable function and finally generates a VNodeconst code = generate(ast, options)

code = { 
    render: `with(this){return ${_c(tag, data, children, normalizationType)}} `.// Dynamic rendering function
    staticRenderFns: [_c(tag, data, children, normalizationType), ...]  // store static rendering functions
}
Copy the code

The rendering function generation process

  • The process of rendering function generation is actually traversing the AST nodes, processing each node in a recursive way, and finally generating something like:_c(tag, attr, children, normalizationType)The results of the

Render function scenario

  • The compiler compiles the component template to generate the Render option
  • The user provides the render option instead of the template

The entire process of compiling templates to VNode