Vue source directory

  1. Response principle
  2. Principles of Template compilation
  3. Asynchronous Update Principle
  4. Principle of diff algorithm
  5. Mixin principle
  6. Vue – principle of the router
  7. Life cycle principles
  8. .

This article directory

  1. Principles of Template compilation
  2. The version of Vue2
  3. reference

3.1 Have a nice video Vue official tutorial notes – specially handwritten by Rain Creek Mini-Vue

  1. The diagram
  2. conclusion

First, template compilation principle

Template template string -> AST tree -> optimize syntax tree (tag is static node or not)-> transform to get the new AST -> render function

AST (Abstract Syntax tree) plays a very important role in the development process, but we rarely touch it directly. Whether it is code compilation (Babel), packaging (Webpack), code compression, CSS preprocessing, code validation (ESLint), code beautification (Pretiier), compilation of templates in Vue, all of these can be implemented without the AST.

Vue template compilation process

Vue provides two versions, one is Runtime + Compiler, the other is Runtime only, the former contains the compiled code, the compilation process is put at Runtime, the latter does not contain the compiled code, Use webpack’s vue-loader to compile the render function from the template. Regardless of which version you use, there is always a step to compiling the template into the Render function.

We usually use the runtime version (without compiled code)

Vue single file SFC -> webpack (VUe-loader) -> compiles the template into the render function

1) The compilation process of VUE template is divided into three stages:

1.1) Parse
const ast = parse(template.trim(), options)
Copy the code

The template string is parsed into AST. The parser is implemented by VUE itself. During the parsing process, regular expressions are used to parse the template sequentially. The generated AST element nodes are of three types: 1 is a normal element, 2 is an expression, and 3 is plain text.

For example,

<ul :class="bindCls" class="list" v-if="isShow">
    <li v-for="(item,index) in data" 
        @click="clickItem(index)">{{item}}:{{index}}
    </li>
</ul>
Copy the code

The AST tree generated from template parsing is as follows:

ast = {  
      'type': 1.'tag': 'ul'.'attrsList': [].'attrsMap': {    
          ':class': 'bindCls'.'class': 'list'.'v-if': 'isShow'
       },
       'if': 'isShow'. }Copy the code
12) Optimize the syntax tree (whether it is static node markup)

Not all data in the Vue template is responsive, and many data will never change after the first rendering, so the DOM generated by this part of data will not change, so we can skip the comparison of them in the process of patch.

In this stage, the generated AST tree will be deeply traversed to detect whether each of its sub-trees is a static node. If it is a static node, they will never need to change the DOM generation, which will greatly optimize the update of the template at runtime. Optimize performance by ensuring that static data does not enter the update phase of the virtual DOM.

During traversal, static and staticRoot are marked for each AST element node in the entire AST tree (recurse all children of that node, false if they are not static, true otherwise).

After this stage, the AST in the above example becomes:


ast = {  
      'type': 1.'static': false.// This property is added to each node
      'tag': 'ul'.'attrsList': [].'attrsMap': {    
          ':class': 'bindCls'.'class': 'list'.'v-if': 'isShow'
       },
       'if': 'isShow'. }Copy the code
1.3) Generate code to generate the RENDER function of the AST
const code = generate(ast, options)
Copy the code

Generate the AST to generate the render function:

with(this){
  return (isShow) ?
    _c('ul', {
        staticClass: "list".class: bindCls
      },
      _l((data), function(item, index) {
        return _c('li', {
          on: {
            "click": function($event) {
              clickItem(index)
            }
          }
        },
        [_v(_s(item) + ":" + _s(index))])
      })
    ) : _e()
}
Copy the code

It must be confusing to see a bunch of underscores here, where _c corresponds to the createElement method in the virtual DOM. Other underlining methods are defined in core/instance/render-helpers, so you don’t have to expand what each method does.

Second, Vue2 version

Many people use Vue with template code generated directly from VUe-CLI, not knowing that Vue actually provides two builds.

  • vue.js: full version that includes the ability to compile templates
  • vue.runtime.js: runtime version, which does not provide template compilation capability and requires vue-loader to compile in advance.

If you use vue-loader, you can use vue.runtime.min.js to compile the template. If you import vue directly from the script tag in the browser, you need to use vue.min.js. Compile the template at run time.

Three, reference

  • Handwritten Vue2.0 source code (two) – template compilation principle
  • Vue template compilation process
  • 666 Vue template compilation principle
  • There are nice video Vue official tutorial notes – specially handwritten by Rain Creek Mini-Vue

Iv. Relevant diagrams

Five, the summary

  1. SFC -> webpack (VUe-loader) -> compiles the template into the render function

  2. Template template string -> AST tree -> optimize syntax tree (tag is static node or not)-> transform to get the new AST -> render function

  3. < span style = “box-sizing: border-box; color: RGB (74, 74, 74); line-height: 22px; font-size: 14px! Important; word-break: break-word! Important;”