virtual-dom(后文简称vdom)的概念大规模的推广还是得益于react出现，virtual-dom也是react这个框架的非常重要的特性之一。相比于频繁的手动去操作dom而带来性能问题，vdom很好的将dom做了一层映射关系，进而将在我们本需要直接进行dom的一系列操作，映射到了操作vdom，而vdom上定义了关于真实dom的一些关键的信息，vdom完全是用js去实现，和宿主浏览器没有任何联系，此外得益于js的执行速度，将原本需要在真实dom进行的创建节点,删除节点,添加节点等一系列复杂的dom操作全部放到vdom中进行，这样就通过操作vdom来提高直接操作的dom的效率和性能。
Vue在2.0版本也引入了vdom。其vdom算法是基于snabbdom算法所做的修改。
在Vue的整个应用生命周期当中，每次需要更新视图的时候便会使用vdom。那么在Vue当中，vdom是如何和Vue这个框架融合在一起工作的呢？以及大家常常提到的vdom的diff算法又是怎样的呢？接下来就通过这篇文章简单的向大家介绍下Vue当中的vdom是如何去工作的。
首先，我们还是来看下Vue生命周期当中初始化的最后阶段：将vm实例挂载到dom上，源码在src/core/instance
Vue.prototype._init = function () {
...
vm.$mount(vm.$options.el) // 实际上是调用了mountComponent方法
...
}
mountComponent函数的定义是：
export function mountComponent ( vm: Component, el: "htmlcode">vm._watcher = new Watcher(vm, updateComponent, noop)实例化一个watcher，在求值的过程中this.value = this.lazy "htmlcode">
updateComponent = () => { vm._update(vm._render(), hydrating) }完成视图的更新工作事实上就是调用了vm._update方法，这个方法接收的第一个参数是刚生成的Vnode，调用的vm._update方法的定义是
Vue.prototype._update = function (vnode: VNode, hydrating"htmlcode">function patch (oldVnode, vnode, hydrating, removeOnly, parentElm, refElm) { // 当oldVnode不存在时 if (isUndef(oldVnode)) { // 创建新的节点 createElm(vnode, insertedVnodeQueue, parentElm, refElm) } else { const isRealElement = isDef(oldVnode.nodeType) if (!isRealElement && sameVnode(oldVnode, vnode)) { // patch existing root node // 对oldVnode和vnode进行diff，并对oldVnode打patch patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly) } } }在对oldVnode和vnode类型判断中有个sameVnode方法，这个方法决定了是否需要对oldVnode和vnode进行diff及patch的过程。
function sameVnode (a, b) { return ( a.key === b.key && a.tag === b.tag && a.isComment === b.isComment && isDef(a.data) === isDef(b.data) && sameInputType(a, b) ) }sameVnode会对传入的2个vnode进行基本属性的比较，只有当基本属性相同的情况下才认为这个2个vnode只是局部发生了更新，然后才会对这2个vnode进行diff，如果2个vnode的基本属性存在不一致的情况，那么就会直接跳过diff的过程，进而依据vnode新建一个真实的dom，同时删除老的dom节点。
vnode基本属性的定义可以参见源码:src/vdom/vnode.js里面对于vnode的定义。
constructor ( tag"htmlcode">{ tag: 'div' data: { id: 'app', class: 'page-box' }, children: [ { tag: 'p', text: 'this is demo' } ] }最后渲染出的实际的dom结构就是:
<div id="app" class="page-box"> <p>this is demo</p> </div>让我们再回到patch函数当中，在当oldVnode不存在的时候，这个时候是root节点初始化的过程，因此调用了createElm(vnode, insertedVnodeQueue, parentElm, refElm)方法去创建一个新的节点。而当oldVnode是vnode且sameVnode(oldVnode, vnode)2个节点的基本属性相同，那么就进入了2个节点的diff过程。
diff的过程主要是通过调用patchVnode方法进行的:
function patchVnode(oldVnode, vnode, insertedVnodeQueue, removeOnly) { ... }if (isDef(data) && isPatchable(vnode)) { // cbs保存了hooks钩子函数: 'create', 'activate', 'update', 'remove', 'destroy' // 取出cbs保存的update钩子函数，依次调用，更新attrs/style/class/events/directives/refs等属性 for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode) if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode) }更新真实dom节点的data属性，相当于对dom节点进行了预处理的操作
接下来:
... const elm = vnode.elm = oldVnode.elm const oldCh = oldVnode.children const ch = vnode.children // 如果vnode没有文本节点 if (isUndef(vnode.text)) { // 如果oldVnode的children属性存在且vnode的属性也存在 if (isDef(oldCh) && isDef(ch)) { // updateChildren，对子节点进行diff if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly) } else if (isDef(ch)) { // 如果oldVnode的text存在，那么首先清空text的内容 if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '') // 然后将vnode的children添加进去 addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue) } else if (isDef(oldCh)) { // 删除elm下的oldchildren removeVnodes(elm, oldCh, 0, oldCh.length - 1) } else if (isDef(oldVnode.text)) { // oldVnode有子节点，而vnode没有，那么就清空这个节点 nodeOps.setTextContent(elm, '') } } else if (oldVnode.text !== vnode.text) { // 如果oldVnode和vnode文本属性不同，那么直接更新真是dom节点的文本元素 nodeOps.setTextContent(elm, vnode.text) }这其中的diff过程中又分了好几种情况，oldCh为oldVnode的子节点，ch为Vnode的子节点：
- 首先进行文本节点的判断，若oldVnode.text !== vnode.text，那么就会直接进行文本节点的替换；
- 在vnode没有文本节点的情况下，进入子节点的diff；
- 当oldCh和ch都存在且不相同的情况下，调用updateChildren对子节点进行diff；
- 若oldCh不存在，ch存在，首先清空oldVnode的文本节点，同时调用addVnodes方法将ch添加到elm真实dom节点当中；
- 若oldCh存在，ch不存在，则删除elm真实节点下的oldCh子节点；
- 若oldVnode有文本节点，而vnode没有，那么就清空这个文本节点。
这里着重分析下updateChildren方法，它也是整个diff过程中最重要的环节:
function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) { // 为oldCh和newCh分别建立索引，为之后遍历的依据 let oldStartIdx = 0 let newStartIdx = 0 let oldEndIdx = oldCh.length - 1 let oldStartVnode = oldCh[0] let oldEndVnode = oldCh[oldEndIdx] let newEndIdx = newCh.length - 1 let newStartVnode = newCh[0] let newEndVnode = newCh[newEndIdx] let oldKeyToIdx, idxInOld, elmToMove, refElm // 直到oldCh或者newCh被遍历完后跳出循环 while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { if (isUndef(oldStartVnode)) { oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left } else if (isUndef(oldEndVnode)) { oldEndVnode = oldCh[--oldEndIdx] } else if (sameVnode(oldStartVnode, newStartVnode)) { patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue) oldStartVnode = oldCh[++oldStartIdx] newStartVnode = newCh[++newStartIdx] } else if (sameVnode(oldEndVnode, newEndVnode)) { patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue) oldEndVnode = oldCh[--oldEndIdx] newEndVnode = newCh[--newEndIdx] } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue) canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm)) oldStartVnode = oldCh[++oldStartIdx] newEndVnode = newCh[--newEndIdx] } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue) // 插入到老的开始节点的前面 canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm) oldEndVnode = oldCh[--oldEndIdx] newStartVnode = newCh[++newStartIdx] } else { // 如果以上条件都不满足，那么这个时候开始比较key值，首先建立key和index索引的对应关系 if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) idxInOld = isDef(newStartVnode.key) "//img.jbzj.com/file_images/article/201707/201707100945207.jpg" alt="" />第二轮的diff中，满足sameVnode(oldStartVnode, newStartVnode)，因此对这2个vnode进行diff，最后将patch打到oldStartVnode上，同时oldStartVnode和newStartIndex都向前移动一位
第三轮的diff中，满足sameVnode(oldEndVnode, newStartVnode)，那么首先对oldEndVnode和newStartVnode进行diff，并对oldEndVnode进行patch，并完成oldEndVnode移位的操作，最后newStartIndex前移一位，oldStartVnode后移一位；
第四轮的diff中，过程同步骤3；
第五轮的diff中，同过程1；
遍历的过程结束后，newStartIdx > newEndIdx，说明此时oldCh存在多余的节点，那么最后就需要将这些多余的节点删除。
在vnode不带key的情况下，每一轮的diff过程当中都是起始和结束节点进行比较，直到oldCh或者newCh被遍历完。而当为vnode引入key属性后，在每一轮的diff过程中，当起始和结束节点都没有找到sameVnode时，首先对oldCh中进行key值与索引的映射:
if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) idxInOld = isDef(newStartVnode.key) "htmlcode">if (isUndef(idxInOld)) { // New element // 创建新的dom节点 // 插入到oldStartVnode.elm前面 // 参见createElm方法 createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm) newStartVnode = newCh[++newStartIdx] }如果存在这个key，那么就取出oldCh中的存在这个key的vnode，然后再进行diff的过程:
elmToMove = oldCh[idxInOld] /* istanbul ignore if */ if (process.env.NODE_ENV !== 'production' && !elmToMove) { // 将找到的key一致的oldVnode再和newStartVnode进行diff if (sameVnode(elmToMove, newStartVnode)) { patchVnode(elmToMove, newStartVnode, insertedVnodeQueue) // 清空这个节点 oldCh[idxInOld] = undefined // 移动node节点 canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm) newStartVnode = newCh[++newStartIdx] } else { // same key but different element. treat as new element // 创建新的dom节点 createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm) newStartVnode = newCh[++newStartIdx] }通过以上分析，给vdom上添加key属性后，遍历diff的过程中，当起始点, 结束点的搜寻及diff出现还是无法匹配的情况下时，就会用key来作为唯一标识，来进行diff，这样就可以提高diff效率。
带有Key属性的vnode的diff过程可见下图：
注意在第一轮的diff过后oldCh上的B节点被删除了，但是newCh上的B节点上elm属性保持对oldCh上B节点的elm引用。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
南强小屋 Design By 杰米广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com南强小屋 Design By 杰米暂无Vue实现virtual-dom的原理简析的评论...
稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！
昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？