Vue uses virtual dom to render view

premise

vue version: v2.5.17-beta.0

Trigger render

After the data is updated, vue will automatically trigger the render work of the view, which depends on data drivers. Under the data driver work, each vue's data attribute is listened to, and when the set is triggered, an event is dispatched to notify the collected dependencies, thereby triggering the corresponding operation. The render work is one of the dependencies and is collected by each data attribute. Therefore, after each data attribute is changed, the render will be triggered.

vue update listening

Look at a piece of code

// From the mountComponent functionupdateComponent = function () {
 vm._update(vm._render(), hydrating);
};

new Watcher(vm, updateComponent, noop, {
 before: function before () {
 if (vm._isMounted) {
  callHook(vm, 'beforeUpdate');
 }
 }
}, true /* isRenderWatcher */);

updateComponent is a function that updates the component, calls vm._update internally, and passes the parameter vm._render();

• What does vm._render() return? Looking at the source code, you will know that the virtual dom (VNode) has been returned
• What did the vm._update function do? As the name implies, update the incoming vnode
• When will the updateComponent function be triggered? Changes to the data attribute value in any vue will be triggered

Update view

Reading the _update function, we learned that the vm.__patch__ method was finally called, and finally found the return value of the createPatchFunction method.

var patch = createPatchFunction({ nodeOps: nodeOps, modules: modules });

.__patch__ = inBrowser ? patch : noop; 

Next, focus on the return function patch of createPatchFunction.

If the new vnode does not exist, the old vnode is logged out

if (isUndef(vnode)) {
 if (isDef(oldVnode)) { invokeDestroyHook(oldVnode); }
 return
}

If the old vnode does not exist, a new vnode is created

if (isUndef(oldVnode)) {
 // empty mount (likely as component), create new root element
 isInitialPatch = true;
 createElm(vnode, insertedVnodeQueue);
} 

If the above does not hold, both the new vnode and oldVnode exist. If the oldVnode is not the real dom, it is a virtual dom node, and the new and old vnodes are similar, the diff algorithm is performed

var isRealElement = isDef();
if (!isRealElement && sameVnode(oldVnode, vnode)) {
 // patch existing root node
 patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly);
}

If the new and old vnodes are different, get the parent node of oldVnode to assist in creating the new vnode node

var oldElm = ;
var parentElm = (oldElm);

// create new node
createElm(
 vnode,
 insertedVnodeQueue,
 // extremely rare edge case: do not insert if old element is in a
 // leaving transition. Only happens when combining transition +
 // keep-alive + HOCs. (#4590)
 oldElm._leaveCb ? null : parentElm,
 (oldElm)
);

The above steps found that when updating the view, the focus is on the patchVnode function, so the following is the function of the patchVnode is read.

If the new and old nodes are equal, no processing will be done

if (oldVnode === vnode) {
 return
}

If vnode is not a text node, there are several situations

if (isDef(oldCh) && isDef(ch)) {
 // If the children of oldVnode and vnode have values ​​(component layer) and do not want to wait, then the update children process is performed if (oldCh !== ch) { updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly); }
} else if (isDef(ch)) {
 // If the children of vnode have a value, if the current dom has text, clear it. // and use the dom of oldVnode as the parent node to create the children node of the new vnode if (isDef()) { (elm, ''); }
 addVnodes(elm, null, ch, 0,  - 1, insertedVnodeQueue);
} else if (isDef(oldCh)) {
 // If oldVnode has children, but new ones do not, delete oldVnode's vnode's children's vnode removeVnodes(elm, oldCh, 0,  - 1);
} else if (isDef()) {
 // If oldVnode has text information, clear the text of dom (elm, '');
}

If the vnode is a text node, when the text of the new and old nodes is different, update the text of the dom to the text of the new vnode

else if ( !== ) {
 (elm, );
} 

The patchVnode function processing situation is sorted out:

• If the new and old vnodes are the same, no processing will be done
• If the new vnode is a text node and the new and old text is different, update the dom to the text of vnode
• If new and old vnodes have children, which means they are component layers, then updateChildren is called to update the component layer update
• If the new vnode is the component layer and oldVnode is not, the child elements of the new vnode component will be added to the current dom
• If oldVnode is the component layer and the new vnode is not, then the dom is operated and the child elements contained in oldVnode are deleted.
• If the new vnode is the component layer and oldVnode is the text node, clear the text of the dom

In the patchVnode part, a new function emerged: updateChildren, which is called when both the new and old vnodes are not text nodes. This is the core of the rendering mechanism of vue

updateChildren

The loop process of the children of the new and old vnode in updateChildren. Each loop determines whether there is the same vnode. If not, find out whether the key of the child node of the current new vnode exists in the children of oldVnode. If it does not exist, it creates a new dom. Otherwise, if the new and old nodes are the same, call back the patchVnode function to process 2 nodes. This way, recursive processing is performed and the update of the component layer is completed.

Ending

This article is the part of the vue update mechanism of the source code analysis, and omits the source code analysis of special scenarios, such as ssr, static components, etc.

Summarize

The above is the method of Vue using virtual dom to render view introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to everyone in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!