【vue2源码学习】— diff

vue更新还是调用了 vm._update
会进入下面这一步
vm.$el = vm.__patch__(prevVnode, vnode)
又回到了patch方法
会通过sameVnode 判断是不是相同的vnode

// patch代码片段
const isRealElement = isDef(oldVnode.nodeType)
if (!isRealElement && sameVnode(oldVnode, vnode)) {
  // patch existing root node
  patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
}


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)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        a.asyncFactory === b.asyncFactory &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

先判断新旧key是否相等
不相等直接判定为不同
相同继续判断上面那些属性的相等性

新旧不同

如果新旧 vnode 不同，只需要替换已存在的节点
patch继续往下执行
const oldElm = oldVnode.elm
const parentElm = nodeOps.parentNode(oldElm)
// create new node
createElm(
  vnode,
  insertedVnodeQueue,
  oldElm._leaveCb ? null : parentElm,
  nodeOps.nextSibling(oldElm)
)
旧节点为参考节点，创建新的节点，并插入到 DOM 中
// update parent placeholder node element, recursively
// 更新父节点的占位符节点
if (isDef(vnode.parent)) {...}
// 删除旧节点
if (isDef(parentElm)) {
  removeVnodes(parentElm, [oldVnode], 0, 0)
} else if (isDef(oldVnode.tag)) {
  invokeDestroyHook(oldVnode)
}

新旧相同

调用 patchVNode 方法
function patchVnode (
    oldVnode,
    vnode,
    insertedVnodeQueue,
    ownerArray,
    index,
    removeOnly
  ) {
    if (oldVnode === vnode) {
      return
    }
	...预处理
    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)
    }
    if (isUndef(vnode.text)) {
      //oldCh 与 ch 都存在且不相同时，使用 updateChildren 函数来更新子节点
      if (isDef(oldCh) && isDef(ch)) {
        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
      } else if (isDef(ch)) {
      	//只有 ch 存在，那么旧节点就不需要了。
      	//如果旧节点是文本节点则先将节点的文本清空，
      	//然后通过 addVnodes 将 ch 批量插入到 elm 下。
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
      } else if (isDef(oldCh)) {
        //只有 oldCh 存在，表示更新的是空节点，
        //removeVnodes将旧的节点全部清除
        removeVnodes(oldCh, 0, oldCh.length - 1)
      } else if (isDef(oldVnode.text)) {
        //只有旧节点是文本节点的时候，清除文本内容。
        nodeOps.setTextContent(elm, '')
      }
    } else if (oldVnode.text !== vnode.text) {
      //vnode 是个文本节点且新旧文本不相同，则直接替换文本内容
      nodeOps.setTextContent(elm, vnode.text)
    }
    ...
  }

vue中的diff核心函数updateChildren
vue中的diff新旧的数据结构都是数组，通过双指针算法和一些参数进行的;
(react中的diff是新节点是数组，旧节点是链表，根据新旧的位置和key设计的算法进行的)
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

    // removeOnly is a special flag used only by <transition-group>
    // to ensure removed elements stay in correct relative positions
    // during leaving transitions
    const canMove = !removeOnly

    if (process.env.NODE_ENV !== 'production') {
      checkDuplicateKeys(newCh)
    }

    while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      //oldStartVnode 不存在 oldStartIdx 继续向中间靠拢
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      } else if (isUndef(oldEndVnode)) {
        // oldEndVnode 不存在 oldEndIdx 继续向中间靠拢
        oldEndVnode = oldCh[--oldEndIdx]
      } else if (sameVnode(oldStartVnode, newStartVnode)) {
        //对比新旧的左边
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
        // 对比新旧的右边
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue, newCh, newEndIdx)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
        // 旧的左边和新的右边比较, 处理旧节点前面的节点移动到后边的情况
        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)) { // Vnode moved left
       //旧的右边和新的左边比较, 处理旧节点移动到前面的情况
        patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
        canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        // 以上都没命中通过key创建map，找相同的节点
        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, newCh, newStartIdx)
            oldCh[idxInOld] = undefined
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // 相同的key但是不同的元素，也创建新的
            // 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(oldCh, oldStartIdx, oldEndIdx)
    }
  }

oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx表示
一直循环处理直到旧的节点出现交叉或者新的节点出现交叉
oldStartIdx > oldEndIdx表示旧节点先交叉，新节点有多的
所以新增节点
newStartIdx > newEndIdx表示新节点先交叉,旧节点有多的
删除多余的旧节点

---
nodeOps.insertBefore方法实际调用的就是dom的insertBefore方法
export function insertBefore (parentNode: Node, newNode: Node, referenceNode: Node) {
  parentNode.insertBefore(newNode, referenceNode)
}
// 参数解释
newNode：将要插入的节点
referenceNode：被参照的节点（即要插在该节点之前）
parentNode：父节点

这个方法的作用:
如果给定的子节点是对文档中现有节点的引用，
insertBefore()会将其从当前位置移动到新位置。
如果引用节点为空，则将指定的节点添加到指定父节点的子节点列表的末尾
条件分支:
else if (sameVnode(oldEndVnode, newStartVnode)
else if (sameVnode(oldStartVnode, newEndVnode)
这两句其实是对react那种前面的节点移动到后面的优化
react中会根据位置作为算法的条件之一
(假设都是可以复用的节点)简单来说就是
旧结构里面越靠后的节点移动到了前面,这个节点会标记为不动
但是旧结构里面在它之前的节点都会被标记为移动
所以这两句分支就是对这种情况的优化

我们从源码可以看出vue对这种情况是没办法的
需要依赖key进行遍历更新
旧: A->B->C->D key也是ABCD
新: B->A->D->C

所以vue进行更新节点的时候尽量不要把节点位置交错

总结

vue的diff使用双指针算法，进行新旧对比
假设:
旧: A->B->C->D key也是ABCD
新: B->A->D->C
（过一遍逻辑）
1.先判断 旧A是不是未定义，是的话旧的左指针向右一步

2.判断 旧D是不是未定义，是的话旧的右指针向左一步

3.判断 旧A和新B是不是sameVnode，
是的话继续patch并且新旧左指针右移一步
下次比较旧B新A

4.判断 旧D和新C是不是sameVnode，
是的话继续patch并且新旧右指针左移一步，
下次比较旧C新D

5.判断 旧A和新C是不是sameVnode，
是的话继续patch并且把旧A移动到旧D的兄弟节点前面
(如果没有会移动父节点的最后),
旧左指针右移一步，新右指针左移一步,下次比较旧B新D

6.判断 旧D和新B是不是sameVnode，是的话继续patch
并且把旧D移动到旧A的前面,
旧右指针左移一步，新左指针右移一步,下次比较旧C新A

7.以上都没命中,createKeyToOldIdx拿到key的map，
newStartVnode.key是否存在
存在就从map拿没有就遍历判断新B在A->B->C->D的位置，
没有就新建，
有就判断这个节点和新的左指针做对应的节点是否相同
相同移动这个节点到旧左指针元素之前
不同创建新的
新左指针右移一步下次比较新A旧A

直到新或者旧的指针出现交叉
然后处理剩下的节点

8.如果旧的先交叉说明新的多了，新增节点
9.如果新的先交叉说明新的少了，删除节点