广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买

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)    }   ...  }

主体会有为两大分支: 前后虚拟节点一致、前后虚拟节点不一致

// /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)}

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)    }  }

在挂载时会经过diff算法后进行模板更新,初次会将真实dom节点和生成的虚拟节点进行对比,并将生成的虚拟节点储存起来,以便之后更新做对比。diff算法只要分两发分支,前后虚拟节点一致和前后虚拟节点不一致。当前后虚拟节点不一致时,会创建新节点、更新父占位符、删除旧节点。如果旧节点是真实节点,就将其转为虚拟节点,拿到旧节点的父节点后替换旧节点。当前后虚拟节点一致时,会先判断新节点是否为文本,如果值则直接添加,如果不是先比较属性,再判断如果新节点有children,旧节点没children,就直接添加新节点children,如果新节点没有,旧节点有,就会将旧节点的children移除,如果新旧节点都有children,利用双指针同层对比,通过头头对比、尾尾对比、头尾对比、尾头对比、乱序对比不断迭代对其进行判断更新,最大程度的利用旧节点,之后如果有多余的新节点就会将其添加,多余的旧节点将其删除,最后将对比后的虚拟节点返回储存起来,作为下次对比的旧节点。

（学习视频分享：web前端开发、编程基础视频）

以上就是深入剖析vue2.x中diff算法的原理的详细内容，更多请关注9543建站博客其它相关文章！

广告：SSL证书一年128.66元起，点击购买~~~