Vue template compilation details

think:

HTML is a tag language, and only JS can implement judgment and looping. Templates have instructions, interpolation, and JS expressions, which can implement judgment, looping, etc. Therefore, templates are not HTML, so templates must be converted into some kind of JS code. How is this compilation performed?

Analysis:

Template compilation is the process of compiling a template into a render function. This process can be roughly divided into three stages:

1. parse

The parser mainly converts template strings into element ASTs

Template strings:

<div>
   <p>{{message}}</p>
</div>

element ASTs

AST refers to the abstract syntax tree and is similar to Vnode . Both use JavaScript objects to describe the tree representation of nodes.

{
  tag: "div"
  // Node type (1 label, 2 text node containing literal expression, 3 normal text node or comment node)
  type: 1,
  // static root node staticRoot: false,
  // Static node static: false,
  plain: true,
  // Reference to the parent node element description object parent: undefined,
  // Only when the node type is 1, there will be an attrsList attribute, which is an object array that stores the original HTML attribute name and value attrsList: [],
  // Same as above, the difference is that attrsMap stores the html attribute name and value in key-value pairs: attrsMap: {},
  //Stores the element description object of all child nodes of this node children: [
      {
      tag: "p"
      type: 1,
      staticRoot: false,
      static: false,
      plain: true,
      parent: {tag: "div", ...},
      attrsList: [],
      attrsMap: {},
      children: [{
          type: 2,
          text: "{{message}}",
          static: false,
          // When the node type is 2, the object will contain the expression expression: "_s(message)"
      }]
    }
  ]
}

1.1 Rules for interception

Mainly by judging the value of html.indexof('<') in the template to determine whether to intercept the tag or the text.

The interception process:

String part

`<div><p>{{message}}<p></div>`

1.2 Interception process part

First interception

• Determine the value of html.indexof('<') in the template, which is zero (one of comment, conditional comment, doctype , start tag, end tag)
• The regular expression of the start tag is matched successfully, the current tag name is obtained as div, and then the matched '<div' part is cut off to get the new string ><p>{{message}}</p></div>
• After cutting off the start tag, the regular expression of the matching attribute will be used to match. If the match is successful, the attribute list of the tag is obtained. If the match is unsuccessful, the attribute list of the tag is an empty array.
• After the attributes are cut off, the regular expression that matches the end of the start tag is used to match it to get information about whether it is a self-closing tag, and then the matched string is cut off to get a new string <p>{{message}}</p></div>

• Match the start tag and determine whether the current node has a root node. If not, a tree node of the element type will be created. If it exists, it will be set as the child node of currentParent and the current node will be pushed into the stack .

/**
   To sum up, match tags, extract attributes, and establish hierarchies*/
// After the above matching, the remaining string is:
`<p>{{message}}<p></div>`

Second interception

/**
    Same as above*/
// After the above matching, the remaining string is:
`{{message}}</p></div>`

The third interception

• Determine the value of html.indexof('<') in the template, which is greater than or equal to zero (one of text and expression)
• Query the nearest '<' and match it to see if it matches (one of the start tag, end tag, comment, conditional comment). If the match is successful, the traversal ends. If not, the traversal continues.

For example:

a < b </p> => text part a < b , hits the end tag

a<b</p> => text part a
, hit the start tag <b

/**
   To sum up, determine the type and intercept the text*/
// After the above matching, the remaining string is:
`</p></div>`

Fourth interception

• Determine the value of html.indexof('<') in the template, which is zero (one of comment, conditional comment, doctype, start tag, end tag)
• The regular expression of the ending tag is matched successfully, and then the matched part </p> is cut off to get the new string </div>
• When the end tag is matched, a node 'p' is popped from the stack and the last node 'div' in the stack is set as currentParent

/**
    To sum up, match the label and determine the level*/
// After the above matching, the remaining string is:
`</div>`
The fifth interception/**
    Same as above*/
Finish

1.3 Parser Summary

• The process of converting template strings into element ASTs is actually the process of continuously intercepting strings and parsing them.
• When the start tag is matched, the corresponding start tag is intercepted, the basic structure of AST is defined, and the attributes ( attrs , tagName ), instructions, etc. on the tag are parsed, and the tag is pushed into the stack.
• When the end tag is matched, tagName of each item in the stack needs to be matched from back to front through tagName of this end tag, and all items after the matched item are deleted (popped from the stack). Therefore, the last item in the stack is the parent element.
• During the parsing phase, the nodes are flattened and have no hierarchical relationship. By observing the node tree, we can find that the innermost node is parsed and the last node to be parsed is often the parent element, so we use a stack to record the hierarchical relationship of the nodes.
• The self-closing tag <input /> has no child nodes, so it does not need push to the stack .

2. optimize

The optimizer's main function is to optimize the static content of the generated AST and mark static nodes. In order to re-render each time, there is no need to create new nodes for the static subtree, and patch process in the virtual DOM can be skipped (that is, there is no need to participate in the second page rendering, which greatly improves the rendering efficiency).

2.1 Static Nodes

Traverse the AST syntax tree, find all static nodes and mark them

function isStatic(node) {
    // expression
    if (node.type === 2) {
      return false
    }
    //text
    if (node.type === 3) {
      return true
    }
    /**
 

1. Dynamic binding syntax cannot be used, that is, the tag cannot have attributes starting with v-, @, or :;
2. You cannot use v-if, v-else, and v-for instructions;
3. It cannot be a built-in component, that is, the tag name cannot be slot and component ;
4. The tag name must be a platform reserved tag, that is, it cannot be a component;
5. The parent node of the current node cannot be a template tag with v-for ;
6. The keys of all attributes of the node must be keys that only exist in static nodes. Note: The keys of static nodes are limited.

It can only be one type , tag, attrsList, attrsMap, plain, parent, children, attrs;

    */
    return !!(node.pre || (
      !node.hasBindings &&
      !node.if && !node.for &&
      !isBuiltInTag(node.tag) &&
      isPlatformReservedTag(node.tag) &&
      !isDirectChildOfTemplateFor(node) &&
      Object.keys(node).every(isStaticKey)
    ))
}

2.2 Static root node

Traverse the tree after the above steps, find the static root node, and mark it

2.3 Optimizer Summary

• Nodes that do not use Vue's unique syntax (except v-pre v-once ) can be called static nodes
• Static node: refers to the current node and all its child nodes are static nodes
• Static root node: refers to a node that itself and all its child nodes are static nodes, but the parent node is a dynamic node

3. generate code generator

The function of the code generator is to generate a code string through the AST syntax tree. The code string is packaged into the rendering function. After the rendering function is executed, a vnode can be obtained.

3.1 JS with syntax

Using with can change the way to search for free variables in {}, and search for free variables in {} as attributes of obj . If no matching obj attribute is found, an error will be reported.

const obj = {a: 100, b: 200}
with(obj) {
     console.log(a)
     console.log(b)
     // console.log(c) // will report an error}

Code string

Parse the element ASTs generated by parse and concatenate them into strings

with(this){return _c('div',_c('p',[_v(message)])])}

Get the render function:

/** The code string can get the render function of the current component through new Function('code string')*/

const stringCode = `with(this){return _c('div',_c('p',[_v(message)])])}`

const render = new Function(stringCode)

To view different instructions, interpolation, and JS expressions, you can use vue-template conversion

const compiler = require('vue-template-compiler')
// interpolation const template = `<p>{{message}}</p>`
const result = compiler.compile(template)
console.log(result.render)
// with(this){return _c('p',[_v(_s(message))])}

Vue source code to find the meaning of the abbreviation function

The source code for template compilation can be found in the `vue-template-compiler` [2] package

function installRenderHelpers(target) {
    target._c = createElement
    // Tag v-once
    target._o = markOnce
    // Convert to Number type target._n = toNumber
    // Convert to string target._s = toString
    // Render v-for
    target._l = renderList
    // Render normal slots and scoped slots target._t = renderSlot
    // Render static nodes through staticRenderFns target._m = renderStatic
    // Get the filter target._f = resolveFilter
    // Check keyboard event keycode
    target._k = checkKeyCodes
    target._b = bindObjectProps
    // Create a text vnode
    target._v = createTextVNode
    // Create an empty vnode
    target._e = createEmptyVNode
    target._u = resolveScopedSlots
    target._g = bindObjectListeners
    // Processing modifier target._p = prependModifier
}

Summary:

Vue scaffolding will use vue-loader to compile templates in the development environment (pre-compilation)

The parsing process is to intercept the string in small segments, and then maintain a stack to save the DOM depth. When all the strings are intercepted, a complete AST is parsed.

The optimization process is to recursively mark all nodes to indicate whether they are static nodes, and then recursively mark the static root nodes again.

The code generation stage is to recursively generate a string of function execution code. The recursive process calls different generation methods according to different node types.

This is the end of this article about the details of vue template compilation. For more relevant vue template compilation content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!