This is the 8th day of my participation in Gwen Challenge.

preface

Most students still use the template when they use vue. js.

But there is more to creating HTML in vue.js than just templates. We can use render to create HTML, or use JSX to create HTML.

The templates we often use are compiled and converted into rendering functions, which, when executed, produce a virtual tree of nodes for rendering.

Below, we will learn the whole process of converting a template into a render function.

Template compilation

Compiling a template into a rendering function can be done in two steps, first parsing the template into an AST(Abstract Syntax Tree) and then using the AST to generate the rendering function.

Since static nodes do not need to be re-rendered, after generating the AST, you need to walk through and mark all static nodes.

Template compilation is divided into three parts:

  • Parse templates to AST
  • Traversing the AST marks static nodes
  • Use AST to generate rendering functions

These three parts correspond to three modules respectively

  • The parser
  • The optimizer
  • Code generator
Graph LR t[template] subgraph a[parser] --> b[optimizer] --> c[code generator] end r[rendering function] t --> a c --> r

The parser

Inside the parser, there are many smaller parsers, including filter parsers, text parsers, and HTML parsers.

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

The text parser is used to parse text. Its main function is to parse text with variables, such as the following:

Hello {{name}}
Copy the code

Text without variables is plain text and does not need to be parsed using a text parser.

Last and the most important thing is that the HTML parser, it is the core of the parser module, its function is analytic template, whenever the starting location to parse HTML tags, end position, the text or comments, will trigger a hook function, and then by parameter passing out the related information, then generate different AST node.

AST and VNode are similar in that they both use objects in JavaScript to represent nodes.

The optimizer

The goal of the optimizer is to traverse the AST, detect and mark all static subtrees (DOM nodes that never change).

When the static subtrees in the AST are marked, each time you re-render, you do not need to create new virtual nodes for the marked static nodes, but clone the existing virtual nodes directly. In the virtual DOM update operation, if two nodes are found to be the same node, the two nodes will be updated under normal circumstances. However, if the two nodes are static nodes, the node update process can be directly skipped.

Code generator

The code generator is the final step in template compilation, and its role is to convert the AST into the content of the rendering function, which can be called a “code string.”

<p align="center" @click="a">hello world</p>
Copy the code

The generated code string is:

    with(this) {
        return _c( // $createElement
            'p',
            {
                attrs: {
                    align: "center"
                },
                on: {
                    click: a
                }
            },
            [_v("hello world")])}Copy the code

When such a code string is finally exported for external use, new Function(…) is used. To create the function, which is called the render function.

conclusion

In this article, we briefly looked at the template compilation process.

Template compilation goes through three processes:

  • Parse the template into an AST
  • Traversing the AST marks static nodes
  • Generate code strings using AST

Later, we’ll learn in detail how the parser works, the first step, if you parse a string template into an AST.