黄老师这节怎么没有讲这四种情况之外的patch流程啊

来源:5-9 组件更新(3)

月上云流

2019-04-19

如果这四种情况都不满足的话,就会将所有oldVnode通过key创建一个map映射,然后用newStartVnode的key去查找map中具有相同key值得oldVnode,有的话就执行插入,没有的话创建新的element。我说的对吗?

while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
      if (isUndef(oldStartVnode)) {
        ...
      } else if (isUndef(oldEndVnode)) {
        ...
      } else if (sameVnode(oldStartVnode, newStartVnode)) {
       ...
      } else if (sameVnode(oldEndVnode, newEndVnode)) {
       ...
      } else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right
       ...
      } else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left
        ...
      } 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, newCh, newStartIdx)
            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]
      }
    }
写回答

2回答

ustbhuangyi

2019-04-19

这节课的电子书在 https://ustbhuangyi.github.io/vue-analysis/reactive/component-update.html#updatechildren
我应该是通过一个具体的示例去讲的,可能没有走到这个分支吧。
你的理解应该是没问题的。

0
0

ustbhuangyi

2019-04-19

能否贴一下相关的代码,光看文字我不知道你说的是哪快的逻辑。

0
1
月上云流
老师,代码已经添加
2019-04-19
共1条回复

Vue.js 源码深入解析 深入理解Vue实现原理

全方位讲解 Vue.js 源码,进阶高级工程师

4989 学习 · 1038 问题

查看课程