Vue2源码解析系列-Patch

Patch

简介

Patch流程

创建新增的节点

删除节点

更新节点

新旧vnode比对流程

• 只有oldVnode有子节点： 清空DOM中的子节点

• 只有vnode有子节点： 进一步判断oldVnode是否有text,若无则添加子节点,若有则清空DOM的文本

• oldVnode和vnode都有子节点： 更新子节点

更新子节点

创建子节点

删除子节点

移动子节点

更新子节点

优化策略

• 新前与旧前

• 新后与旧后

• 新后与旧前

• 新前与旧后

新前和旧前

新后与旧后

新后与旧前

新前与旧后

哪些是未处理的节点

更新子节点总体流程

diff流程

更新节点

1. 旧节点是否存在，不存在则创造节点插入视图

2. 如果旧节点存在，则将新节点和旧节点进行更详细的比对

3. 新节点全部遍历完后，如果还存在未被匹配到的旧节点，则从视图中删除这些旧节点。

详细比对节点

1. 旧节点和新节点完全相同，则退出

2. 旧节点和新节点都是静态节点，则退出

3. 新节点有没有text属性，即判断新节点是否是文本节点
1. 新节点与旧节点的文本相同则退出
2. 不同则更改对应视图里的文本

4. 判断新节点有没有子节点（判断元素节点）
1. 都有子节点，此时进行更新子节点操作
2. 只有新节点有子节点，清空旧节点的文本(如果有的话)，然后讲新节点的子节点添加到DOM中
3. 只有旧节点有子节点，清空DOM中的子节点

更新子节点

1. 快速查找
1. 新节点未处理的第一个节点和旧节点未处理的最后一个节点比对（需要移动节点）
2. 新节点未处理的第一个节点和旧节点未处理的第一个节点比对
3. 新节点未处理的最后一个节点和旧节点未处理的第一个节点比对（需要移动节点）
4. 新节点未处理的最后一个节点和旧节点未处理的最后一个节点比对

2. 如果有建立key与节点index的对应关系
1. 新节点与key查找到的那个旧节点匹配，则进行比对
2. 不匹配，则循环旧节点列表查找对应的旧节点

3. 没有则循环遍历旧节点列表中未处理的节点

遍历未处理的节点

源码解析

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 是一个特殊的标志，仅在<transition-group>中被使用
    // 确保在leaving期间被删除的元素停留在正确的相对位置上
    const canMove = !removeOnly

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

    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)
        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 {
        // 建立旧vnode的key与index的关系表
        if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
        idxInOld = isDef(newStartVnode.key)
          ? oldKeyToIdx[newStartVnode.key]
          : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)

        if (isUndef(idxInOld)) {
           // 如果找不到对应的oldVnode，则新建一个节点并插入
          createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
        } else {
          vnodeToMove = oldCh[idxInOld]
          if (sameVnode(vnodeToMove, newStartVnode)) {
            // 如果通过key找到对应的节点，则直接进行patch打补丁操作
            patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
            oldCh[idxInOld] = undefined
            canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
          } else {
            // 相同key，但是是不同节点的情况，创建新的节点插入
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          }
        }
        newStartVnode = newCh[++newStartIdx]
      }
    }
    // 最后如果oldVnode先遍历完,那么剩下的newVnode就是应该被新创建的节点
    // 最后如果newVnode先遍历完,那么剩下的oldVnode就是应该被删除的节点
    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)
    }
  }

function sameVnode (a, b) {
  return (
    a.key === b.key &&
    a.asyncFactory === b.asyncFactory && (
      (
        a.tag === b.tag &&
        a.isComment === b.isComment &&
        isDef(a.data) === isDef(b.data) &&
        sameInputType(a, b)
      ) || (
        isTrue(a.isAsyncPlaceholder) &&
        isUndef(b.asyncFactory.error)
      )
    )
  )
}

function sameInputType (a, b) {
  if (a.tag !== 'input') return true
  let i
  const typeA = isDef(i = a.data) && isDef(i = i.attrs) && i.type
  const typeB = isDef(i = b.data) && isDef(i = i.attrs) && i.type
  return typeA === typeB || isTextInputType(typeA) && isTextInputType(typeB)
}

function createKeyToOldIdx (children, beginIdx, endIdx) {
  let i, key
  const map = {}
  for (i = beginIdx; i <= endIdx; ++i) {
    key = children[i].key
    if (isDef(key)) map[key] = i
  }
  return map
}

function findIdxInOld(node, oldCh, start, end) {
  for (let i = start; i < end; i++) {
    const c = oldCh[i]
    if (isDef(c) && sameVnode(node, c)) return i
  }
}