This is the 11th day of my participation in the More text Challenge. For more details, see more text Challenge

One, foreword

The first part mainly introduces the observation of array data changes, involving the following points:

  • Implement the concrete logic that has overridden the prototype method after the array data changes have been hijacked;
  • Analysis of the observation situation when the array data changes;

So far, all the scenarios of data hijacking have been analyzed

In this section, Vue’s data rendering process

Two, how to render

1. Code review

Once the data is initialized, view rendering will begin

export function initMixin(Vue) {
  Vue.prototype._init = function (options) {
    const vm = this;
    vm.$options = options;
    
    initState(vm);

    if (vm.$options.el) {
      // todo...}}}Copy the code

El is where the DOM is mounted, such as:

<div id=app>{{message}}</div>
Copy the code

2. Problem analysis

Vue doesn’t manipulate strings directly. Think about this:

  • Parsing instructions from strings and updating values can be difficult
  • Considering the scenario of node reuse, it is impossible to complete by comparing strings

3, Vue view rendering

Vue supports template and JSX:

  • In daily development, most of them will use template to complete template writing, because template is simple and convenient;
  • JSX is more flexible than Template. It’s a little bit more complicated to write;

Third, analysis of rendering process

1. Process analysis

Vue needs to parse the template to convert the template syntax into javascript syntax.

For this transformation process, we need to use the AST syntax tree (which can describe CSS, JS, HTML and other syntax).

The AST syntax tree is used to describe the syntax structure of HTML, and the code is reorganized into JS syntax according to the AST tree structure

That is, subsequent operations on the HTML template can be done through JS, without having to worry about parsing strings

2. Vue template compilation principle

  1. Compile the template template into the render function
  2. Return the virtual DOM through the rander function
  3. Then the diff algorithm is used to compare the virtual DOM

Process: template template -> render function -> virtual DOM -> diff algorithm

Four, simple analysis

template-explorer.vuejs.org/

  • Div template: finally compiled into a render method, the render function;
  • The _c function is equivalent to createElement, which creates a div containing the attribute ID with the value app;
  • The _v function creates text by creating _s(MSG) as a text;
  • _s function: equivalent to json. stringify, if the template parameter MSG is an object, it is converted to string by _s

Fifth, the core process of Vue data rendering

1. First rendering

  1. Template is compiled as an AST syntax tree.
  2. Generate the render function from the AST syntax tree;
  3. Return vnode virtual node via render function
  4. Using vNode virtual nodes to generate real DOM and render;

2, when the view is updated

  1. Call the render function to generate new vNode virtual nodes;
  2. Diff algorithm is used to compare new and old Vnode virtual nodes.
  3. Update the real DOM according to the comparison results of virtual nodes;

Six, the end

This paper mainly introduces the core process of VUE data rendering

In the next article, the Template template generates the AST syntax tree