怎样使用vue中diff算法

2020-11-27 来源：赴品旅游

比较二者引用是否一致
之后asyncFactory不知道是做什么的，所以这个比较看不懂
静态节点比较key，相同后也不做重新渲染，直接拷贝componentInstance（once命令在此生效）
如果vnode是文本节点或注释节点，但是vnode.text != oldVnode.text时，只需要更新vnode.elm的文本内容就可以
children的比较

如果只有oldVnode有子节点，那就把这些节点都删除

如果只有vnode有子节点，那就创建这些子节点，这里如果oldVnode是个文本节点就把vnode.elm的文本设置为空字符串

都有则updateChildren，这个之后详述

如果oldVnode和vnode都没有子节点，但是oldVnode是文本节点或注释节点，就把vnode.elm的文本设置为空字符串

updateChildren

这部分重点还是关注整个算法

首先四个指针，oldStart，oldEnd，newStart，newEnd，两个数组，oldVnode，Vnode。

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
 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 {
 if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
 idxInOld = isDef(newStartVnode.key)
 ? oldKeyToIdx[newStartVnode.key]
 : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
 if (isUndef(idxInOld)) { // New element
 createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
 } else {
 vnodeToMove = oldCh[idxInOld]
 if (sameVnode(vnodeToMove, newStartVnode)) {
 patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
 oldCh[idxInOld] = undefined
 canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
 } else {
 // same key but different element. treat as new element
 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(parentElm, oldCh, oldStartIdx, oldEndIdx)
 }
 }

一个循环比较的几种情况和处理（以下的++ --均指index的++ --）比较则是比较的node节点，简略写法不严谨比较用的是sameVnode函数也不是真的全等

整体循环不结束的条件oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx

oldStart === newStart，oldStart++ newStart++
oldEnd === newEnd，oldEnd-- newEnd--
oldStart === newEnd, oldStart插到队伍末尾 oldStart++ newEnd--
oldEnd === newStart, oldEnd插到队伍开头 oldEnd-- newStart++
剩下的所有情况都走这个处理简单的说也就两种处理，处理后newStart++

newStart在old中发现一样的那么将这个移动到oldStart前

没有发现一样的那么创建一个放到oldStart之前

循环结束后并没有完成

还有一段判断才算完

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(parentElm, oldCh, oldStartIdx, oldEndIdx)
 }

简单的说就是循环结束后，看四个指针中间的内容，old数组中和new数组中，多退少补而已

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

全部栏目

怎样使用vue中diff算法