This is the 8th day of my participation in the August More Text Challenge

When a component is created and updated, vUE performs an internal update function that internally uses the Render function to generate a virtual DOM tree. The component points to the new tree. Vue then compares the old and new trees to find differences and finally updates to the real DOM. The process of comparing differences is called DIff, and vue performs this process through an internal function called patch. In comparison, VUE adopts the depth-first and same-layer comparison method. Vue determines whether two nodes are the same by the key and tag of the virtual node. Specifically, the root node is compared first, if the same, the reference to the real DOM associated with the old node is attached to the new node, then the attribute real DOM is updated as needed, and then the array of child nodes is compared. If they are different, all real DOM’s are created recursively based on the information of the new node, and attached to the corresponding virtual node at the same time. Then the old DOM is removed. When comparing arrays of child nodes, Vue uses two Pointers to each array of child nodes, one to the head and the other to the middle for comparison. The purpose of this is to reuse the real DOM as much as possible and to destroy and create the real DOM as little as possible. If they are the same, go through the same comparison process as the root node, and if they are different, move the real DOM to the appropriate location. And so on, recursively, until the whole tree is compared.

1. The timing of the diff

When a component is created, and when a dependent property or data changes, a function is run that does two things:

  • run_renderCreate a virtual DOM tree (vnode tree)
  • run_update, pass the root node of the virtual DOM tree, and finally complete the update of the real DOM when the old and new trees are compared

The core code is as follows:

// Vue constructor
function vue(){
    / /... Other code
    var updateComponent = () = > {
        this._update(this._render())
    }
    new watcher(updateComponent);
    / /... Other code
}
Copy the code

Diff occurs during the _update function

What is the _update function doing

The _update function receives a vnode argument, which is the newly generated virtual DOM tree. At the same time, the _update function obtains the old virtual DOM tree from the current component’s _vnode property. The _update function first assigns the component’s _vnode property to point to the new tree, and then determines whether the old tree exists.

  • Does not exist: indicates that this is the first time the component is loaded, so the internalpatchFunction to directly traverse the new tree, generating the real DOM for each node, mounted to each nodeelmOn the property.
  • Presence: indicates that the component has been rendered previously, and therefore passes through the internalpatchFunction to compare the old and new trees to achieve the following two goals.

    1. Complete minimization of the real DOM

    2. Make the nodes of the new tree correspond to the appropriate real DOM

3. Comparison process of patch functions

1. Identical: refers to the label type of two nodes. The key value is the same, but the input element depends on the type attribute 2. New element: creates a real DOM element based on the information provided by a virtual node and mounts the elm property of the virtual node 3. Delete element: vnode.elm.remove() 4. Update: compare two virtual nodes for update, which only occurs when two virtual nodes are [same] 5. Compare child nodes: compares the child nodes of two virtual nodes. The render function first compares root nodes if two nodes:

  • 1. Assign the real DOM of the old node to the new node: newvNode.elm = oldvNode.elm 2. Compare the attributes of the new node and the old node, and update the changed ones to the real DOM. 3. After the processing of the current two nodes is complete, the child nodes are compared
  • Different 1. New nodes recursively create new elements. 2. Old nodes destroy elements