Vue使用虚拟dom进行渲染view的方法

// 来自mountComponent函数
updateComponent = function () {
 vm._update(vm._render(), hydrating);
};

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

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

Vue.prototype.__patch__ = inBrowser "htmlcode">

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


如果旧的vnode不存在，则创建新的vnode


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


如果以上不成立，则新的vnode和oldVnode都存在.如果oldVnode不是真实的dom，则为虚拟dom节点，并且新老vnode相似，则进行diff算法


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


如果新老vnode不同，则拿到oldVnode的父节点，辅助创建vnode的新节点


var oldElm = oldVnode.elm;
var parentElm = nodeOps.parentNode(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 "htmlcode">

if (oldVnode === vnode) {
 return
}


如果vnode不是文本节点则有几种情况


if (isDef(oldCh) && isDef(ch)) {
 // 如果oldVnode和vnode的children都有值（组件层），并且不想等，则执行更新children流程
 if (oldCh !== ch) { updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly); }
} else if (isDef(ch)) {
 // 如果vnode的children有值，如果当前dom有文本则清空，
 // 并将oldVnode的dom作为父节点，创建新vnode的children节点
 if (isDef(oldVnode.text)) { nodeOps.setTextContent(elm, ''); }
 addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue);
} else if (isDef(oldCh)) {
 // 如果oldVnode存在children，但是新的没有，则删除oldVnode的children的vnode
 removeVnodes(elm, oldCh, 0, oldCh.length - 1);
} else if (isDef(oldVnode.text)) {
 // 如果oldVnode有文本信息，则将dom的文本清空
 nodeOps.setTextContent(elm, '');
}


如果vnode是文本节点, 则当新老节点文本不同，将dom的文本更新成新vnode的文本


else if (oldVnode.text !== vnode.text) {
 nodeOps.setTextContent(elm, vnode.text);
} 


patchVnode函数处理的情况梳理一下则为：

  
如果新老vnode相同，不作处理
  
如果新vnode是文本节点，并且新老文本不同，将dom更新为vnode的文本
  
如果新老vnode都有children，表示他们是组件层，则调用updateChildren去做组件层更新
  
如果新vnode是组件层，oldVnode不是，则将当前dom添加新vnode组件的子元素
  
如果oldVnode是组件层，新vnode不是，则操作dom，将oldVnode包含的子元素删除
  
如果新vnode是组件层，oldVnode是文本节点，则将dom的文本清空

在patchVnode部分又浮现了一个新的函数：updateChildren，是在新老vnode都不是文本节点时调用的，这里就是vue的渲染机制的核心
updateChildren
updateChildren中将新老vnode的children进行的循环处理，每一次循环去判断是否有相同的vnode，如果没有则查找当前新vnode的子节点的key是否存在oldVnode的children中，如果不存在在这存在但已经不相同则创建新的dom，否则，如果是新老节点相同，回调patchVnode函数去处理2个节点。 这样进行了递归处理，组件层的更新就完成了。
结尾


本文为看源码分析vue更新机制部分，省略了特殊场景的源码分析，比如ssr、静态组件等。
总结
以上所述是小编给大家介绍的Vue使用虚拟dom进行渲染view的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！