vue核心面试题：diff算法

小灰灰 2022-11-27 00:48 407阅读 0赞

一、diff算法的时间复杂度

两个树的完全的 diff 算法是一个时间复杂度为 O(n3) , Vue 进行了优化·O(n3) 复杂度的问题转换成 O(n) 复杂度的问题(只比较同级不考虑跨级问题)，因为在前端操作dom的时候了，不会把当前元素作为上一级元素或下一级元素，很少会跨越层级地移动Dom元素，常见的都是同级的比较。 所 以 Virtual Dom只会对同一个层级的元素进行对比。

二、vue中diff算法的原理

在数据发生变化，vue是先根据真实DOM生成一颗 virtual DOM ，当 virtual DOM 某个节点的数据改变后会生成一个新的 Vnode ，然后 Vnode 和 oldVnode 作对比，发现有不一样的地方就直接修改在真实的DOM上，然后使 oldVnode 的值为 Vnode ，来实现更新节点。

1.原理简述：

（1）先去同级比较，然后再去比较子节点

（2）先去判断一方有子节点一方没有子节点的情况

（3）比较都有子节点的情况

（4）递归比较子节点

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2_size_16_color_FFFFFF_t_70

2.源码：

源码文件地址：src/core/vdom/patch.js

源码总结：

在进行节点比较时，是通过patch这个方法实现，其中如果不是真实元素并且用sameVnode看两个是否是同一个元素，如果是然后会调用patchVnode进行比较，比较的是虚拟节点不是真实节点，如果不值得去比较则用 Vnode 替换 oldVnode。patchVnode会比较这两个节点，判断 Vnode 和 oldVnode 是否指向同一个对象，如果是，那么直接 return，复用老的真是元素。如果不是会用新的子节点和旧的字节做比较。如果他们都有文本节点并且不相等，那么将el的文本节点设置为Vnode的文本节点；如果两个都有子节点的情况下会调用updateChildren方法比较他们的子节点；只有新的节点有子节点而旧节点没有子节点，就会把新增的子节点插入到旧的dom中；如果当前新的节点中没有子节点，旧的中有子节点，然后就会把旧的节点删除掉；

updateChildren方法中，先定义了四对指针，先比较新的和旧的第一个子节点是否一样，如果一样会移动前面两个指针，以此类推，如果比对最后新的节点多了一个子节点就把它插入旧的中。如果开始第一个子节点不一样就从后面开始进行比较（从尾子节点开始比较），比到最后把新增的节点插入到旧的dom中。还有这种情况就是头和尾节点都不相等的情况下，用当前的头和旧的尾节点进行比较，如果一样就把旧的尾节点移到前面去，然后将旧的尾指针向前移动一位，当前头指针移动到下一个子节点上。另一种就是用旧的结尾和新的开头节点进行比较，四种比较策略。如果存在key，就会拿的当前子节点的key去旧的子节点中找，如果找到就将它移动到旧节点的前面，然后就将指针移向当前节点的第二个子节点上，以此类推，如果当前子节点没有就将它直接插入到旧的节点中，最后把旧的节点中多余出的子节点删除掉。

（1）patch

  1. return function patch (oldVnode, vnode, hydrating, removeOnly) {
  2.     if (isUndef(vnode)) {
  3.       if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
  4.       return
  5.     }
  7.     let isInitialPatch = false
  8.     const insertedVnodeQueue = []
  10.     if (isUndef(oldVnode)) {
  11.       // empty mount (likely as component), create new root element
  12.       isInitialPatch = true
  13.       createElm(vnode, insertedVnodeQueue)
  14.     } else {
  15.       const isRealElement = isDef(oldVnode.nodeType)
  16.       // 如果不是真实元素并且两个是同一个元素的话，然后会调用patchVnode进行比较
  17.       // 比较是虚拟节点不是真实节点
  18.       if (!isRealElement && sameVnode(oldVnode, vnode)) {
  19.         // patch existing root node
  20.         patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
  21.       } else {
  22.         if (isRealElement) {
  23.           // mounting to a real element
  24.           // check if this is server-rendered content and if we can perform
  25.           // a successful hydration.
  26.           if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
  27.             oldVnode.removeAttribute(SSR_ATTR)
  28.             hydrating = true
  29.           }
  30.           if (isTrue(hydrating)) {
  31.             if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
  32.               invokeInsertHook(vnode, insertedVnodeQueue, true)
  33.               return oldVnode
  34.             } else if (process.env.NODE_ENV !== 'production') {
  35.               warn(
  36.                 'The client-side rendered virtual DOM tree is not matching ' +
  37.                 'server-rendered content. This is likely caused by incorrect ' +
  38.                 'HTML markup, for example nesting block-level elements inside ' +
  39.                 '<p>, or missing <tbody>. Bailing hydration and performing ' +
  40.                 'full client-side render.'
  41.               )
  42.             }
  43.           }
  44.           // either not server-rendered, or hydration failed.
  45.           // create an empty node and replace it
  46.           oldVnode = emptyNodeAt(oldVnode)
  47.         }
  49.         // replacing existing element
  50.         const oldElm = oldVnode.elm
  51.         const parentElm = nodeOps.parentNode(oldElm)
  53.         // create new node
  54.         createElm(
  55.           vnode,
  56.           insertedVnodeQueue,
  57.           // extremely rare edge case: do not insert if old element is in a
  58.           // leaving transition. Only happens when combining transition +
  59.           // keep-alive + HOCs. (#4590)
  60.           oldElm._leaveCb ? null : parentElm,
  61.           nodeOps.nextSibling(oldElm)
  62.         )
  64.         // update parent placeholder node element, recursively
  65.         if (isDef(vnode.parent)) {
  66.           let ancestor = vnode.parent
  67.           const patchable = isPatchable(vnode)
  68.           while (ancestor) {
  69.             for (let i = 0; i < cbs.destroy.length; ++i) {
  70.               cbs.destroy[i](ancestor)
  71.             }
  72.             ancestor.elm = vnode.elm
  73.             if (patchable) {
  74.               for (let i = 0; i < cbs.create.length; ++i) {
  75.                 cbs.create[i](emptyNode, ancestor)
  76.               }
  77.               // #6513
  78.               // invoke insert hooks that may have been merged by create hooks.
  79.               // e.g. for directives that uses the "inserted" hook.
  80.               const insert = ancestor.data.hook.insert
  81.               if (insert.merged) {
  82.                 // start at index 1 to avoid re-invoking component mounted hook
  83.                 for (let i = 1; i < insert.fns.length; i++) {
  84.                   insert.fns[i]()
  85.                 }
  86.               }
  87.             } else {
  88.               registerRef(ancestor)
  89.             }
  90.             ancestor = ancestor.parent
  91.           }
  92.         }
  94.         // destroy old node
  95.         if (isDef(parentElm)) {
  96.           removeVnodes([oldVnode], 0, 0)
  97.         } else if (isDef(oldVnode.tag)) {
  98.           invokeDestroyHook(oldVnode)
  99.         }
  100.       }
  101.     }
  103.     invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
  104.     return vnode.elm
  105.   }

（2）patchVnode 

  1. function patchVnode (
  2.     oldVnode,
  3.     vnode,
  4.     insertedVnodeQueue,
  5.     ownerArray,
  6.     index,
  7.     removeOnly
  8.   ) {
  9.     if (oldVnode === vnode) { // 如果相同直接return
  10.       return
  11.     }
  13.     if (isDef(vnode.elm) && isDef(ownerArray)) {
  14.       // clone reused vnode
  15.       vnode = ownerArray[index] = cloneVNode(vnode)
  16.     }
  18.     const elm = vnode.elm = oldVnode.elm
  20.     if (isTrue(oldVnode.isAsyncPlaceholder)) {
  21.       if (isDef(vnode.asyncFactory.resolved)) {
  22.         hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
  23.       } else {
  24.         vnode.isAsyncPlaceholder = true
  25.       }
  26.       return
  27.     }
  29.     // reuse element for static trees.
  30.     // note we only do this if the vnode is cloned -
  31.     // if the new node is not cloned it means the render functions have been
  32.     // reset by the hot-reload-api and we need to do a proper re-render.
  33.     if (isTrue(vnode.isStatic) &&
  34.       isTrue(oldVnode.isStatic) &&
  35.       vnode.key === oldVnode.key &&
  36.       (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
  37.     ) {
  38.       vnode.componentInstance = oldVnode.componentInstance
  39.       return
  40.     }
  42.     let i
  43.     const data = vnode.data
  44.     if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
  45.       i(oldVnode, vnode)
  46.     }
  47.     // 进行子节点的比较
  48.     const oldCh = oldVnode.children
  49.     const ch = vnode.children
  50.     if (isDef(data) && isPatchable(vnode)) {
  51.       for (i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
  52.       if (isDef(i = data.hook) && isDef(i = i.update)) i(oldVnode, vnode)
  53.     }
  54.     if (isUndef(vnode.text)) {
  55.       if (isDef(oldCh) && isDef(ch)) {// 如果两个都有子节点的情况
  56.         // 比较它们的子节点
  57.         if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
  58.       } else if (isDef(ch)) { // 如果只有新的有子节点
  59.         if (process.env.NODE_ENV !== 'production') {
  60.           checkDuplicateKeys(ch) // 就把新增的子节点插入到旧的节点中
  61.         }
  62.         if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
  63.         addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
  64.       } else if (isDef(oldCh)) { // 如果只有老的有子节点
  65.         removeVnodes(oldCh, 0, oldCh.length - 1) // 就会把旧的节点直接删除
  66.       } else if (isDef(oldVnode.text)) {  // 如果旧节点有子文本节点
  67.         nodeOps.setTextContent(elm, '') // 就把elm置空
  68.       }
  69.     } else if (oldVnode.text !== vnode.text) {
  70.       nodeOps.setTextContent(elm, vnode.text)
  71.     }
  72.     if (isDef(data)) {
  73.       if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
  74.     }
  75.   }

（3）updateChildren（双指针）

  1. function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue, removeOnly) {
  2.     // 做了四对指针
  3.     let oldStartIdx = 0
  4.     let newStartIdx = 0
  5.     let oldEndIdx = oldCh.length - 1
  6.     let oldStartVnode = oldCh[0]
  7.     let oldEndVnode = oldCh[oldEndIdx]
  8.     let newEndIdx = newCh.length - 1
  9.     let newStartVnode = newCh[0]
  10.     let newEndVnode = newCh[newEndIdx]
  11.     let oldKeyToIdx, idxInOld, vnodeToMove, refElm
  13.     // removeOnly is a special flag used only by <transition-group>
  14.     // to ensure removed elements stay in correct relative positions
  15.     // during leaving transitions
  16.     const canMove = !removeOnly
  18.     if (process.env.NODE_ENV !== 'production') {
  19.       checkDuplicateKeys(newCh)
  20.     }
  22.     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
  23.       if (isUndef(oldStartVnode)) {
  24.         oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
  25.       } else if (isUndef(oldEndVnode)) {
  26.         oldEndVnode = oldCh[--oldEndIdx]
  27.       } else if (sameVnode(oldStartVnode, newStartVnode)) {
  28.         patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
  29.         oldStartVnode = oldCh[++oldStartIdx]
  30.         newStartVnode = newCh[++newStartIdx]
  31.       } else if (sameVnode(oldEndVnode, newEndVnode)) {
  32.         patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
  33.         oldEndVnode = oldCh[--oldEndIdx]
  34.         newEndVnode = newCh[--newEndIdx]
  35.       } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
  36.         patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
  37.         canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))
  38.         oldStartVnode = oldCh[++oldStartIdx]
  39.         newEndVnode = newCh[--newEndIdx]
  40.       } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
  41.         patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
  42.         canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
  43.         oldEndVnode = oldCh[--oldEndIdx]
  44.         newStartVnode = newCh[++newStartIdx]
  45.       } else {
  46.         // 在旧的节点中找索引
  47.         if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
  48.         idxInOld = isDef(newStartVnode.key)
  49.           ? oldKeyToIdx[newStartVnode.key]
  50.           : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
  51.         if (isUndef(idxInOld)) { // New element
  52.           // 如果找不到直接进行插入
  53.           createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
  54.         } else {
  55.           vnodeToMove = oldCh[idxInOld]
  56.           // 如果找的到就看他是否相等，如果相等就直接进行移动
  57.           if (sameVnode(vnodeToMove, newStartVnode)) {
  58.             patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
  59.             oldCh[idxInOld] = undefined
  60.             canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
  61.           } else {
  62.             // same key but different element. treat as new element
  63.             // 如果索引相同，但元素不同，会重新创建一个插入到旧的节点中
  64.             createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
  65.           }
  66.         }
  67.         newStartVnode = newCh[++newStartIdx]
  68.       }
  69.     }
  70.     if (oldStartIdx > oldEndIdx) {
  71.       refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
  72.       addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
  73.     } else if (newStartIdx > newEndIdx) {
  74.       removeVnodes(oldCh, oldStartIdx, oldEndIdx)
  75.     }
  76.   }

图：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDcyMDg2_size_16_color_FFFFFF_t_70 1

发表评论

表情：
评论列表 （有 0 条评论，407人围观）

还没有评论，来说两句吧...

相关阅读