Detailed explanation of virtual DOM in Vue source code analysis

Why do we need virtual dom?

Virtual DOM is designed to solve browser performance problems. For example, if there are 10 DOM updates in one operation, the virtual DOM will not operate the DOM immediately, but save the diff content of these 10 updates into a local JS object, and finally attach this JS object to the DOM tree at one time, and then perform subsequent operations, avoiding a lot of unnecessary calculations. In simple terms, Virtual DOM can be understood as a simple JS object, and contains at least three attributes: tag name (tag), attributes (attrs) and child element objects (children).

• ----- Element node: Element node is closer to the real DOM node we usually see. It has a tag attribute that describes the node label noun, a data attribute that describes the node properties such as class and attributes, and a children attribute that describes the contained child node information. Because the situations contained in element nodes are relatively complex, they are not directly written into the source code like the first three types of nodes.
• The role of VNode: Use the computing performance of js in exchange for the performance consumed by operating the real DOM.
• ----- What role does VNode play in the entire virtual DOM process of Vue? In fact, the role of VNode is quite significant. Before rendering the view, we compile the written template into VNode and cache it. When the page needs to be re-rendered due to data changes, we compare the VNode generated after the data changes with the VNode cached last time to find out the difference. Then the real DOM node corresponding to the different VNode is the node that needs to be re-rendered, and finally the DOM node created with the difference is inserted into the view, and finally a view update is completed. It is to generate virtual DOM nodes corresponding to the real DOM before and after the data changes

Why do we need virtual DOM?

----- It is to exchange the computing performance of JS for the performance consumed by operating the real DOM. Vue instantiates different types of virtual DOM nodes through the VNode class, and learns the differences in the attributes generated by different types of nodes. The so-called different types of nodes are essentially the same, they are all instances of the VNode class, but the parameters passed in during instantiation are different.
With the VNode before and after the data changes, we can perform subsequent DOM-Diff to find the differences, and finally update only the views with differences, so as to achieve the purpose of operating the real DOM as little as possible to save performance.

----- And finding out the DOM nodes that have different updates has achieved the purpose of updating the view with the least operation on the real DOM. The process of comparing the old and new VNodes and finding the differences is the so-called DOM-Diff process. The DOM-Diff algorithm is the core of the entire virtual DOM.

Patch

In Vue, the DOM-Diff process is called the patch process. Patch means patch, which means an idea: the so-called old VNode (odlNode) is the corresponding virtual DOM node before the data changes, and the new NVode is the virtual DOM node corresponding to the view to be rendered after the data changes. Therefore, we need to use the generated new VNode as a benchmark to compare the old oldVNode. If there is a node on the new VNode but not on the old oldVNode, then add it to the old oldVNode. If there is a node that is not on the new VNode but on the old oldVNode, then remove it from the old oldVNode. If both the old and new VNode nodes exist, the new VNode is used as the reference and the old oldVNode is updated so that the new and old VNode nodes are the same.

The whole patch is about creating nodes: new VNodes are there, but old ones are not. Create it in the old oldVNode

Delete a node: If the node does not exist in the new VNode but exists in the old VNode, delete it from the old VNode.

Update node: If both the new and old ones are available, the new VNode will be used as the reference, and the old oldVNode will be updated.

Update child nodes

/* 
    To compare two child node arrays, you must loop through the outer loop newChildren and the inner loop oldCHildren array. For each child node in the outer newChildren array, look in the inner oldChildren array to see if there is an identical child node*/
for (let i = 0; i < newChildred.length; i++) {
    const newChild = newChildren[i]
    for (let j = 0; j < oldChildren.length; j++) {
        const oldChild = oldChildren[i]
        if (newChild === oldChild) {
            // ...
        }
    }
}

Then the above process will have the following four situations

1. Create child nodes. If a child node in newChildren cannot find the same child node in oldChildren, it means that the child node in newChildren did not exist before and needs to be added this time, so create the child node.
2. Delete child nodes. If there are still unprocessed child nodes in oldChildren after looping through every child node in newChildren, it means that the unprocessed child nodes need to be discarded, so delete these nodes.
3. Move child nodes. If a child node in newChildren finds the same child node in oldChildren, but the position is different, it means that the position of the child node needs to be adjusted. Then, based on the position of child node 1 in newChildren, adjust the position of the node in oldChildren to make it the same as in newChildren.
4. Update nodes: If a child node in newChildren finds the same child node in oldChildren and the position is the same, then update the node in oldChildren to make it the same as the node in newChildren
   

We have repeatedly emphasized that updating nodes should be based on the new Vnode, and then operating the old oldVnode so that the old oldVNode is the same as the new VNode.

The update is divided into three parts:

If VNode and oldVNode are both static nodes,

As we said, static nodes are not related to any changes in data, so if they are all static nodes, they are skipped directly without processing.

If the VNode is a text node

If VNode is a text node, which means that this node contains only plain text, then you only need to see if oldVNode is also a text node. If it is, compare whether the two texts are different. If not, change the text in oldVNode to be the same as the text in VNode. If oldVNode is not a text node, then no matter what it is, directly call the setTextNode method to change it to a text node, and the text content is the same as VNode.

If VNode is an element node, it is further divided into the following two cases

1. The node contains child nodes, so at this time we need to check whether the old node contains child nodes. If the old node contains child nodes, we need to recursively compare and update the child nodes.
2. If the old node does not contain child nodes, then the old node may be an empty node or a text node.
3. If the old node is an empty node, create a copy of the child node in the new node and insert it into the old node.
4. If the old node is a text node, clear the text, create a copy of the child node in the new node, and insert it into the old node.
5. The node does not contain child nodes. If the node does not contain child nodes and it is not a text node, it means that the node is an empty node. That's easy to deal with. No matter what was in the old node before, just clear it.
   

// Update node function patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly) {
    // Are vnode and oldVnode exactly the same? If so, exit the program if (oldVnode === vnode) {
        return
    }
    const elm = vnode.elm = oldVnode.elm
    //Are vnode and oldVnode both static nodes? If yes, exit the program if (isTrue(vnode.isStatic) && isTrue(vnode.isStatic) && vnode.key === oldVnode.key && (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))) {
        return
    }
    const oldCh = oldVnode.children
    const ch = vnode.children
    // vnode has text attribute, if not if (isUndef(vnode.text)) {
        if (isDef(oldCh) && isDef(ch)) {
            // If both exist, determine whether the child nodes are the same. If they are different, update the child nodes if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
        }
        // If only the child nodes of vnode exist else if (isDef(ch)) {
            /**
             * Determine whether oldVnode has text * If not, add the child nodes of Vnode to the real DOM * If yes, clear the text in DOM and add the child nodes of vnode to the real DOM * */
            if (isDef(oldVnode.text)) nodeOps.setTextContext(elm, '')
            addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
        }
        // If only the child node of oldnode exists else if (isDef(oldCh)) {
            // Clear all child nodes in DOM removeVnodes(elm, oldCh, 0, oldCh.length - 1)
        }
        // If vnode and oldnode have no child nodes, but oldnode has text else if (isDef(oldVnode.text)) {
            nodeOps.setTextContext(elm, '')
        }
        // The above two judgments can be summarized in one sentence: if there is neither text nor child nodes in vnode, then clear whatever is in the corresponding oldnode} else if (oldVnode.text !== vnode.text) {
        nodeOps.setTextContext(elm, vnode.text)
    }
}

Above, we have learned about Vue's patch, which is the DOM-DIFF algorithm, and we know that there are basically three things to do in the patch process, namely creating nodes, deleting nodes, and updating nodes. Creating and deleting nodes is relatively simple, but updating nodes requires more complex logic because it needs to handle various possible situations. During the update process, all nine Vnodes may contain child nodes. There will be some additional logic for comparing and updating the child nodes. So this article will learn how to compare child nodes in Vue.

Update child nodes

When the new Vnode and the old Vnode are both element nodes and contain child nodes, the chidlren attribute on the two node VNode instances is the contained child node array. Compare the two child nodes through loops, the outer loop newChildren array, the inner loop oldChildren array, each loop for a child node in the outer newChildren array, go to the inner oldChildren array to see if there is the same child node

. Create child nodes

The position where child nodes are created should be before all unprocessed nodes, not after all processed nodes. Because if the child node is inserted after the processed node, if a new node is to be inserted later, the newly added child nodes will be messed up.

. Move child nodes

All unprocessed nodes are the locations where we want to move.

Optimize updating child nodes:

Earlier we introduced that when the new VNode and the old VNode are both element nodes and both contain child nodes, Vue first loops the newChildren array in the outer layer, and then loops the oldChildren array in the inner layer. Each time it loops a child node in the outer newChildren array, it looks in the inner oldChildren array to see if there is an identical child node, and finally performs different operations according to different situations. There are still areas that can be optimized. For example, when there are a large number of child nodes, the time complexity of the loop algorithm will become very large, which is not conducive to performance improvement.

method:

1. First, compare the first child node of all unprocessed child nodes in the newChildren array with the first child node of all unprocessed child nodes in the oldChildren array. If they are the same, then directly proceed to the node update operation;
2. If they are different, compare the last node of all unprocessed child nodes in the newChildren array with the last child node of all unprocessed child nodes in the oldChildren array. If they are the same, directly enter the node update operation;
3. If they are different, compare the last child node of all unprocessed child nodes in the newChildren array with the first child node of all unprocessed child nodes in the oldChildren array. If they are the same, then directly enter the node update operation. After the update, move the node in the oldChildren array to the same position as the node in the newChildren array; if they are different,
4. Then compare the first child node of all unprocessed child nodes in the newChildren array with the last child node of all unprocessed child nodes in the oldChildren array. If they are the same, then directly enter the node update operation. After the update, move the node in the oldChildren array to the same position as the node in the newChildren array.
5. If the last four cases are tried and they are still different, then search for the node in the same way as before.
   In order to avoid the performance problems caused by the large amount of data and increased time complexity of the double loop, Vue chooses to compare four special positions in the child node array, namely: new front and old front, new back and old back, new back and old front, new front and old back
   

In the previous articles, we introduced the virtual DOM in Vue and the patch (DOM-Diff) process of the virtual DOM. The necessary condition for the existence of the virtual DOM is the existing VNode, so where does the VNode come from? Compiling the template written by the user will generate a VNode

Template compilation:

What is template compilation: compile the content similar to native HTML written in the user's template tag, find the content of the native HTML, and then find the non-native HTML. After a series of logical processing, a rendering function is generated. This process of the render function is called the template compilation process. The render function generates a VNode from the template content

The overall rendering process, the so-called rendering process, is to reflect the template written by the user, which is similar to native HTML, in the view through a series of processes. This process has been mentioned above.

Abstract Syntax Tree AST:

• The template written by the user in the template tag is a bunch of strings for Vue. So how to parse this bunch of strings and extract the element's tags, attributes, variable interpolation and other valid information from them? This requires the help of something called an abstract syntax tree.
  Abstract syntax tree, also known as syntax tree, is an abstract representation of the syntax structure of source code. It represents the syntax structure of programming language in the form of tree. Each node in the tree represents a structure in the source code. The reason why syntax is abstract is that the syntax here does not represent every structure that appears in the real syntax. For example, nested brackets are implied in the tree structure and are not presented in the form of node i.
  

Specific process:

• After parsing a bunch of string templates into abstract syntax trees (ASTs), we can perform various operations on them. After processing, the AST is used to generate the render function. The specific three processes can be divided into the following three stages:
  

Template parsing phase: parse a bunch of template strings into an abstract syntax tree AST using regular expressions

Optimization phase: compile AST, find static nodes, and mark them

Code generation phase: Convert AST into rendering function

Only with template compilation can we have virtual DOM and subsequent view updates.

Summarize

This is the end of this article about Vue source code analysis and virtual DOM. For more relevant Vue virtual DOM content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!