Diff 算法

必要性

src\core\instance\lifecycle.js     mountComponent

export function mountComponent () {
    ...
    new Watcher(vm, updateComponent, noop, {
        before () {
          if (vm._isMounted && !vm._isDestroyed) {
            callHook(vm, 'beforeUpdate')
          }
        }
      }, true /* isRenderWatcher */)
}

• mountComponent由 $mount 调用,每个组件挂载时都会执行，建立一个watcher。
• 通常情况下，组件和watch一一对应，但一个组件会有多个data使用，为了可以准确更新dom，利用diff算法对比新旧vdom不同的节点

执行方式

src\core\vdom\patch.js     patchVnode

// 深度优先，同层比较
function patchVnode () {
    ...
    // ! 获取双方子节点
    const oldCh = oldVnode.children
    const ch = vnode.children
    // ! 属性更新, 将update方法都走一遍  cbs[attrFn, classFn]
    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、children 属性互斥
    if (isUndef(vnode.text)) {
      if (isDef(oldCh) && isDef(ch)) {
        // ! 对比子元素
        if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
      } else if (isDef(ch)) {
        if (process.env.NODE_ENV !== 'production') {
          checkDuplicateKeys(ch)
        }
        // ! 新vdom有子元素，旧vdom没有子元素，批量添加
        if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
        addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
      } else if (isDef(oldCh)) {
        // ! 旧vdom有子元素，新vdom没有子元素，批量删除
        removeVnodes(oldCh, 0, oldCh.length - 1)
      } else if (isDef(oldVnode.text)) {
        nodeOps.setTextContent(elm, '')
      }
    } else if (oldVnode.text !== vnode.text) {
      nodeOps.setTextContent(elm, vnode.text)
    }
}

• 获取vnode子节点，判断是否有子元素，还是只是文本，进行相应的更新操作
• 只进行同层比较，从而降低时间复杂度

高效性

src\core\vdom\patch.js     updateChildren

function updateChildren (parentElm, oldCh, newCh, insertedVnodeQueue) {
    // ! 双端判断
    // ! 设置四个游标及对应的节点
    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, 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)
        // ! 移动操作
        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)
        // ! 移动操作
        nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)
        oldEndVnode = oldCh[--oldEndIdx]
        newStartVnode = newCh[++newStartIdx]
      } else {
        // ! 首尾没有找到相同节点
        // ! idxInOld 新数组元素中在老数组中的位置
        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
            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(oldCh, oldStartIdx, oldEndIdx)
    }
  }

1. 双端校验，先首首，尾尾，再首尾，尾首
2. 剩下的找到最长递增子序列，进行更新移动操作
3. 最后新数组还有剩余则批量创建，旧数组还有剩余则批量删除