diff算法是一种通过同层的树节点进行比较的高效算法，避免了对树进行逐层搜索遍历。本篇文章带大家深入剖析vue2.x中diff算法的原理，希望对大家有所帮助！
源码分析文章看了很多,也阅读了至少两遍源码。终归还是想自己写写,作为自己的一种记录和学习。重点看注释部分和总结,其余不用太关心,通过总结对照源码回看过程和注释收获更大
更新方法的定义在生成 render 函数后,就会调用挂载方法,在挂载时就会经过 diff 计算,在初始化的时候,由于没有旧的虚拟节点,所以初次会将真实的 dom 节点与虚拟节点作对比,由于虚拟节点不是原生节点,所以第一次会做一个替换操作。（学习视频分享：vue视频教程）
// /src/core/instance/lifecycle.jsvue.prototype._update = function (vnode: vnode, hydrating?: boolean) {    const vm: component = this    const prevel = vm.$el    const prevvnode = vm._vnode    const restoreactiveinstance = setactiveinstance(vm)    vm._vnode = vnode // 当前render函数产生的虚拟节点,保存后以便下次做对比    if (!prevvnode) {      vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false) //初次渲染    } else {      vm.$el = vm.__patch__(prevvnode, vnode)    }   ...  }
diff 算法两大主要分支主体会有为两大分支: 前后虚拟节点一致、前后虚拟节点不一致
// /src/core/vdom/patch.jsexport function createpatchfunction (backend) {  ...  return function patch (oldvnode, vnode, hydrating, removeonly) {    ...      if (!isrealelement && samevnode(oldvnode, vnode)) {        ...// 前后虚拟节点一致的方法      } else {        ...// 前后虚拟节点不一致的方法      }  }}
前后虚拟节点不一致分为三个步骤: 1.创建新的节点、2.更新父占位符节点、3.删除旧节点
初次进行挂载组件时两者不相同,之后会判断如果是真实dom,就会将其转为虚拟节点并替换掉
if (isrealelement) {  ...  //需要diff 所以将第一次的真实节点转换成虚拟节点  oldvnode = emptynodeat(oldvnode) //<div id="app"></div>}// 拿到父类的dom节点const oldelm = oldvnode.elm //appconst parentelm = nodeops.parentnode(oldelm) // body//创建新dom节点 内部包含组件逻辑createelm(  vnode,  insertedvnodequeue,  oldelm._leavecb ? null : parentelm,  nodeops.nextsibling(oldelm))//更新父的占位符节点 (组件更新相关)if (isdef(vnode.parent)) {  // 在生成render函数时会生成占位符节点<dialog>提示</dialog> => <div>提示</div> <dialog></dialog>就是占位符节点  let ancestor = vnode.parent  // 判断是否可挂载  const patchable = ispatchable(vnode)  while (ancestor) {    for (let i = 0; i < cbs.destroy.length; ++i) { cbs.destroy[i](ancestor) } //更新父占位符的element ancestor.elm = vnode.elm if (patchable) { ... } else { registerref(ancestor) } ancestor = ancestor.parent }}// 删除旧节点if (isdef(parentelm)) { removevnodes([oldvnode], 0, 0)} else if (isdef(oldvnode.tag)) { invokedestroyhook(oldvnode)}
前后虚拟节点一致首先判断新节点是否为文本,是则直接设置文本,不是则继续判断新、旧节点都有children,深度对比(重点)新节点有children,老节点没有,循环添加新节点新节点没有,老节点有children,直接删除老节点function patchvnode (oldvnode,vnode,insertedvnodequeue,ownerarray,index,removeonly) { const elm = vnode.elm = oldvnode.elm let i const data = vnode.data // 是组件vnode,在组件更新会调用组件的prepatch方法 if (isdef(data) && isdef(i = data.hook) && isdef(i = i.prepatch)) { i(oldvnode, vnode) } const oldch = oldvnode.children const ch = vnode.children //比较属性 if (isdef(data) && ispatchable(vnode)) { 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) } // 是否是text if (isundef(vnode.text)) { // 新旧节点都有children if (isdef(oldch) && isdef(ch)) { if (oldch !== ch) updatechildren(elm, oldch, ch, insertedvnodequeue, removeonly) // 新有 老没有 children 循环创建新节点 } else if (isdef(ch)) { if (isdef(oldvnode.text)) nodeops.settextcontent(elm, '') addvnodes(elm, null, ch, 0, ch.length - 1, insertedvnodequeue) // 新没有 老有 children 直接删除老节点 } else if (isdef(oldch)) { removevnodes(oldch, 0, oldch.length - 1) // 新老都没有 children 老的是文本 就置为空 } else if (isdef(oldvnode.text)) { nodeops.settextcontent(elm, '') } // 是text 直接设置文本 } else if (oldvnode.text !== vnode.text) { nodeops.settextcontent(elm, vnode.text) } if (isdef(data)) { if (isdef(i = data.hook) && isdef(i = i.postpatch)) i(oldvnode, vnode) } }
新旧节点都有children情况的对比
// /src/core/vdom/patch.js function updatechildren (parentelm, oldch, newch, insertedvnodequeue, removeonly) { 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, vnodetomove, refelm const canmove = !removeonly // 满足新节点开始索引小于新节点结束索引,旧节点开始索引小于旧节点结束索引 while (oldstartidx <= oldendidx && newstartidx <= newendidx) { if (isundef(oldstartvnode)) { // 是否定义老节点开始元素 oldstartvnode = oldch[++oldstartidx] } else if (isundef(oldendvnode)) {// 是否定义老节点结束元素 oldendvnode = oldch[--oldendidx] // 头(旧节点开始元素)头(新节点开始元素)对比 例如四个li,末尾新增一个li,这种情况头头对比性能高 } else if (samevnode(oldstartvnode, newstartvnode)) { // samevnode判断key和tag是否相同 patchvnode(oldstartvnode, newstartvnode, insertedvnodequeue, newch, newstartidx) oldstartvnode = oldch[++oldstartidx] newstartvnode = newch[++newstartidx] } else if (samevnode(oldendvnode, newendvnode)) { // 尾尾对比 例如四个li,头部新增一个li,这种情况尾尾对比性能高 patchvnode(oldendvnode, newendvnode, insertedvnodequeue, newch, newendidx) oldendvnode = oldch[--oldendidx] newendvnode = newch[--newendidx] } else if (samevnode(oldstartvnode, newendvnode)) {// 头尾对比 节点反转优化 reverse patchvnode(oldstartvnode, newendvnode, insertedvnodequeue, newch, newendidx) canmove && nodeops.insertbefore(parentelm, oldstartvnode.elm, nodeops.nextsibling(oldendvnode.elm)) oldstartvnode = oldch[++oldstartidx] newendvnode = newch[--newendidx] } else if (samevnode(oldendvnode, newstartvnode)) { // 尾头对比 patchvnode(oldendvnode, newstartvnode, insertedvnodequeue, newch, newstartidx) canmove && nodeops.insertbefore(parentelm, oldendvnode.elm, oldstartvnode.elm) oldendvnode = oldch[--oldendidx] newstartvnode = newch[++newstartidx] } else { // 乱序对比(核心diff,其他方式为优化) if (isundef(oldkeytoidx)) oldkeytoidx = createkeytooldidx(oldch, oldstartidx, oldendidx) idxinold = isdef(newstartvnode.key) ? oldkeytoidx[newstartvnode.key] : findidxinold(newstartvnode, oldch, oldstartidx, oldendidx) if (isundef(idxinold)) { createelm(newstartvnode, insertedvnodequeue, parentelm, oldstartvnode.elm, false, newch, newstartidx) } else { vnodetomove = oldch[idxinold] if (samevnode(vnodetomove, newstartvnode)) { patchvnode(vnodetomove, newstartvnode, insertedvnodequeue, newch, newstartidx) oldch[idxinold] = undefined canmove && nodeops.insertbefore(parentelm, vnodetomove.elm, oldstartvnode.elm) } else { createelm(newstartvnode, insertedvnodequeue, parentelm, oldstartvnode.elm, false, newch, newstartidx) } } newstartvnode = newch[++newstartidx] } } // 多出来的新节点直接做插入 多出来的旧节点删除 if (oldstartidx > oldendidx) {      refelm = isundef(newch[newendidx + 1]) ? null : newch[newendidx + 1].elm      addvnodes(parentelm, refelm, newch, newstartidx, newendidx, insertedvnodequeue)    } else if (newstartidx > newendidx) {      removevnodes(oldch, oldstartidx, oldendidx)    }  }
注意点key某些情况下不能使用索引,因为改变前后的索引都是一样的,当在头部添加元素时,如果用索引做key就会出现更新错误问题,vue会理解为在末尾添加一个元素(因为前后的key都是0)在各种对比情况下,只要找到两者相同就会去递归对比children在乱序对比中,key的作用是极大的。无key会出现更新出错问题,同时达不到复用效果diff对比是深度优先,同层比较总结在挂载时会经过diff算法后进行模板更新,初次会将真实dom节点和生成的虚拟节点进行对比,并将生成的虚拟节点储存起来,以便之后更新做对比。diff算法只要分两发分支,前后虚拟节点一致和前后虚拟节点不一致。当前后虚拟节点不一致时,会创建新节点、更新父占位符、删除旧节点。如果旧节点是真实节点,就将其转为虚拟节点,拿到旧节点的父节点后替换旧节点。当前后虚拟节点一致时,会先判断新节点是否为文本,如果值则直接添加,如果不是先比较属性,再判断如果新节点有children,旧节点没children,就直接添加新节点children,如果新节点没有,旧节点有,就会将旧节点的children移除,如果新旧节点都有children,利用双指针同层对比,通过头头对比、尾尾对比、头尾对比、尾头对比、乱序对比不断迭代对其进行判断更新,最大程度的利用旧节点,之后如果有多余的新节点就会将其添加,多余的旧节点将其删除,最后将对比后的虚拟节点返回储存起来,作为下次对比的旧节点。
头头对比
如果新旧开始元素是相同vnode,递归调用patchvnode方法进行深层对比,之后移动索引至下一个元素尾尾对比
如果新旧结束元素是相同vnode,递归调用patchvnode方法进行深层对比,之后移动索引至上一个元素头尾对比
将老节点开始元素和旧节点尾元素进行对比,相同就递归调用patchvnode方法进行深层对比,之后将旧节点元素移动至最后,旧节点头指针移动到下一个,新节点的尾指针移动至上一个。例如旧:a,b,c,新:c,b,a,第一次对比将旧a移动到c后边尾头对比
将老节点尾元素和旧节点开始元素进行对比,相同就递归调用patchvnode方法进行深层对比,之后将旧节点元素移动至最前,旧节点尾指针移动到上一个,新节点的头指针移动至下一个。例如旧:a,b,c,新:c,b,a,d第一次对比将旧c移动到a前边乱序对比
在做比较前会根据key和对应的索引将旧节点生成映射表。在乱序对比时会用当前的key去找旧节点的key,如果能复用,就将节点移动到旧的节点开头处并递归对比children,如果不能复用就创建新的差入到旧的节点开头处。之后将新的索引移至下一个元素（学习视频分享：web前端开发、编程基础视频）
以上就是深入剖析vue2.x中diff算法的原理的详细内容。