vue diff 알고리즘 전체 해석

24300 단어 vue알고리즘diff
머리말
우 리 는 Vue 가 가상 DOM 을 사용 하여 실제 DOM 에 대한 조작 횟수 를 줄 이 고 페이지 운행 의 효율 을 향상 시 키 는 것 을 알 고 있다.오늘 페이지 의 데이터 가 바 뀌 었 을 때 Vue 가 DOM 을 어떻게 업데이트 하 는 지 살 펴 보 자.Vue 와 React 가 dom 을 업데이트 할 때 사용 하 는 알고리즘 은 기본적으로 같 으 며 모두snabbdom에 기반 합 니 다.페이지 의 데이터 가 바 뀌 었 을 때 Vue 는 바로 렌 더 링 되 지 않 습 니 다.diff 알고리즘 을 통 해 어떤 것 이 변화 가 필요 없고 어떤 것 이 변화 가 필요 한 지 판단 하고 업데이트 가 필요 한 DOM 만 업데이트 하면 됩 니 다.그러면 불필요 한 DOM 작업 을 많이 줄 이 고 성능 을 크게 향상 시 킵 니 다.Vue 는 이러한 추상 적 인 노드 VNode 를 사 용 했 습 니 다.이것 은 실제 DOM 에 대한 추상 적 인 것 이 고 특정한 플랫폼 에 의존 하지 않 습 니 다.이것 은 브 라 우 저 플랫폼 일 수도 있 고 weex 일 수도 있 습 니 다.심지어 node 플랫폼 도 이런 추상 적 인 DOM 트 리 를 만 들 고 삭제 수정 하 는 등 작업 을 할 수 있 습 니 다.이것 은 앞 뒤 와 같은 구조 에 가능성 을 제공 합 니 다.
Vue 업데이트 보기
우 리 는 Vue 1.x 에서 모든 데이터 가 하나의 Watcher 에 대응 한 다 는 것 을 알 고 있다.그리고 Vue 2.x 에서 하나의 구성 요 소 는 하나의 Watcher 에 대응 합 니 다.그러면 우리 의 데이터 가 바 뀔 때 set 함수 에서 Dep 의 notify 함 수 를 촉발 하여 Watcher 에 게 vm 을 실행 하 라 고 알 립 니 다.update(vm._render(),hydrating)방법 으로 보 기 를 업데이트 합 니 다.다음은update 방법

Vue.prototype._update = function (vnode: VNode, hydrating?: boolean) {
  const vm: Component = this
  const prevEl = vm.$el
  const prevVnode = vm._vnode
  const restoreActiveInstance = setActiveInstance(vm)
  vm._vnode = vnode
  // Vue.prototype.__patch__ is injected in entry points
  // based on the rendering backend used.
  /*      Vue.prototype.__patch__         */
  if (!prevVnode) {
    // initial render
    vm.$el = vm.__patch__(vm.$el, vnode, hydrating, false /* removeOnly */)
  } else {
    // updates
    vm.$el = vm.__patch__(prevVnode, vnode)
  }
  restoreActiveInstance()
  // update __vue__ reference
  /*         __vue__*/
  if (prevEl) {
    prevEl.__vue__ = null
  }
  if (vm.$el) {
    vm.$el.__vue__ = vm
  }
  // if parent is an HOC, update its $el as well
  if (vm.$vnode && vm.$parent && vm.$vnode === vm.$parent._vnode) {
    vm.$parent.$el = vm.$el
  }
  // updated hook is called by the scheduler to ensure that children are
  // updated in a parent's updated hook.
}
분명 해,우 리 는 볼 수 있어update 방법 은 들 어 오 는 Vnode 를 오래된 Vnode 를 patch 작업 합 니 다.패 치 함수 에서 무슨 일이 일 어 났 는 지 살 펴 보 겠 습 니 다.
patch
patch 함 수 는 신 구 두 노드 를 비교 한 다음 에 수정 해 야 할 노드 가 무엇 인지 판단 하고 이 노드 만 수정 하면 됩 니 다.그러면 DOM 을 비교적 효율적으로 업데이트 할 수 있 습 니 다.먼저 코드 를 살 펴 보 겠 습 니 다.

return function patch (oldVnode, vnode, hydrating, removeOnly) {
  /*vnode             */
  if (isUndef(vnode)) {
    if (isDef(oldVnode)) invokeDestroyHook(oldVnode)
    return
  }

  let isInitialPatch = false
  const insertedVnodeQueue = []

  /*oldVnode   ,       */
  if (isUndef(oldVnode)) {
    // empty mount (likely as component), create new root element
    isInitialPatch = true
    createElm(vnode, insertedVnodeQueue)
  } else {
    /*    VNode   nodeType*/
    const isRealElement = isDef(oldVnode.nodeType)
    if (!isRealElement && sameVnode(oldVnode, vnode)) {
      // patch existing root node
      /*                  */
      patchVnode(oldVnode, vnode, insertedVnodeQueue, null, null, removeOnly)
    } else {
      if (isRealElement) {
        // mounting to a real element
        // check if this is server-rendered content and if we can perform
        // a successful hydration.
        if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {
          /*   VNode         ,hydrating  true*/
          oldVnode.removeAttribute(SSR_ATTR)
          hydrating = true
        }
        if (isTrue(hydrating)) {
          /*       Dom */
          if (hydrate(oldVnode, vnode, insertedVnodeQueue)) {
            /*  insert  */
            invokeInsertHook(vnode, insertedVnodeQueue, true)
            return oldVnode
          } else if (process.env.NODE_ENV !== 'production') {
            warn(
              'The client-side rendered virtual DOM tree is not matching ' +
              'server-rendered content. This is likely caused by incorrect ' +
              'HTML markup, for example nesting block-level elements inside ' +
              '<p>, or missing <tbody>. Bailing hydration and performing ' +
              'full client-side render.'
            )
          }
        }
        // either not server-rendered, or hydration failed.
        // create an empty node and replace it
        /*                Dom  ,       VNode     */
        oldVnode = emptyNodeAt(oldVnode)
      }

      // replacing existing element
      /*      */
      const oldElm = oldVnode.elm
      const parentElm = nodeOps.parentNode(oldElm)

      // create new node
      createElm(
        vnode,
        insertedVnodeQueue,
        // extremely rare edge case: do not insert if old element is in a
        // leaving transition. Only happens when combining transition +
        // keep-alive + HOCs. (#4590)
        oldElm._leaveCb ? null : parentElm,
        nodeOps.nextSibling(oldElm)
      )

      // update parent placeholder node element, recursively
      if (isDef(vnode.parent)) {
        /*        ,       element*/
        let ancestor = vnode.parent
        const patchable = isPatchable(vnode)
        while (ancestor) {
          for (let i = 0; i < cbs.destroy.length; ++i) {
            cbs.destroy[i](ancestor)
          }
          ancestor.elm = vnode.elm
          if (patchable) {
            /*  create  */
            for (let i = 0; i < cbs.create.length; ++i) {
              cbs.create[i](emptyNode, ancestor)
            }
            // #6513
            // invoke insert hooks that may have been merged by create hooks.
            // e.g. for directives that uses the "inserted" hook.
            const insert = ancestor.data.hook.insert
            if (insert.merged) {
              // start at index 1 to avoid re-invoking component mounted hook
              for (let i = 1; i < insert.fns.length; i++) {
                insert.fns[i]()
              }
            }
          } else {
            registerRef(ancestor)
          }
          ancestor = ancestor.parent
        }
      }

      // destroy old node
      if (isDef(parentElm)) {
        /*     */
        removeVnodes([oldVnode], 0, 0)
      } else if (isDef(oldVnode.tag)) {
        /*  destroy  */
        invokeDestroyHook(oldVnode)
      }
    }
  }

  /*  insert  */
  invokeInsertHook(vnode, insertedVnodeQueue, isInitialPatch)
  return vnode.elm
}

Vue 의 diff 알고리즘 은 같은 층 의 노드 를 비교 하기 때문에 시간 복잡 도 는 O(n)만 있 고 알고리즘 은 매우 효율 적 입 니 다.코드 에서 도 알 수 있 듯 이 패 치 에 서 는 오래된 노드 와 새 노드 가 같은 노드 인지 sameVnode 로 판단 합 니 다.그래 야 더 많은 patchVnode 를 진행 할 수 있 습 니 다.그렇지 않 으 면 새로운 DOM 을 만 들 고 오래된 DOM 을 제거 할 수 있 습 니 다.
sameVnode
다음은 sameVnode 에서 두 노드 가 같은 노드 라 는 것 을 어떻게 판단 하 는 지 살 펴 보 겠 습 니 다.

/*
      VNode          ,        
  key  
  tag(        )  
  isComment(       )  
    data(         ,            ,   VNodeData  ,    VNodeData        )    
      <input>   ,type    
*/
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)
      )
    )
  )
}

// Some browsers do not support dynamically changing type for <input>
// so they need to be treated as different nodes
/*
        <input>   ,type    
              <input>  ,           
*/
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)
}
sameVnode 는 두 노드 의 key,tag,주석 노드,데이터 정보 가 같은 지 비교 하여 두 노드 가 같은 노드 인지 판단 하고 input 라벨 에 대해 별도의 판단 을 하여 서로 다른 브 라 우 저 를 호 환 하기 위해 서 입 니 다.
patchVnode

 // diff       
function patchVnode (
  oldVnode,
  vnode,
  insertedVnodeQueue,
  ownerArray,
  index,
  removeOnly
) {
  /*  VNode         */
  if (oldVnode === vnode) {
    return
  }

  if (isDef(vnode.elm) && isDef(ownerArray)) {
    // clone reused vnode
    vnode = ownerArray[index] = cloneVNode(vnode)
  }

  const elm = vnode.elm = oldVnode.elm

  if (isTrue(oldVnode.isAsyncPlaceholder)) {
    if (isDef(vnode.asyncFactory.resolved)) {
      hydrate(oldVnode.elm, vnode, insertedVnodeQueue)
    } else {
      vnode.isAsyncPlaceholder = true
    }
    return
  }

  // reuse element for static trees.
  // note we only do this if the vnode is cloned -
  // if the new node is not cloned it means the render functions have been
  // reset by the hot-reload-api and we need to do a proper re-render.
  /*
        VNode     ,     key  (      ),
        VNode clone      once(  v-once  ,     ),
           elm  componentInstance  。
  */
  if (isTrue(vnode.isStatic) &&
    isTrue(oldVnode.isStatic) &&
    vnode.key === oldVnode.key &&
    (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
  ) {
    vnode.componentInstance = oldVnode.componentInstance
    return
  }

  //         
  /*    data.hook.prepatch     */
  let i
  const data = vnode.data
  if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
    /*i = data.hook.prepatch,      , "./create-component componentVNodeHooks"。*/
    i(oldVnode, vnode)
  }

  //             
  const oldCh = oldVnode.children
  const ch = vnode.children

  //     
  if (isDef(data) && isPatchable(vnode)) {
    // cbs             [attrFn, classFn, ...]
    /*  update    update  */
    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)) { /*    VNode    text   */
    //       
    if (isDef(oldCh) && isDef(ch)) {
      /*      children   ,       diff  ,  updateChildren*/
      if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
    } else if (isDef(ch)) {
      /*                   ,   elm     ,            */
      if (process.env.NODE_ENV !== 'production') {
        checkDuplicateKeys(ch)
      }
      if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
      addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
    } else if (isDef(oldCh)) {
      /*                    ,     ele    */
      removeVnodes(oldCh, 0, oldCh.length - 1)
    } else if (isDef(oldVnode.text)) {
      /*             ,       ,          text   ,      ele   */
      nodeOps.setTextContent(elm, '')
    }
  } else if (oldVnode.text !== vnode.text) {
    /*     text    ,        */
    nodeOps.setTextContent(elm, vnode.text)
  }
  /*  postpatch  */
  if (isDef(data)) {
    if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
  }
}
patchVnode 의 과정 은 다음 과 같 습 니 다.
  • oldVnode 와 Vnode 가 같은 대상 이 라면 오래 되 돌아 가 더 이상 업데이트 할 필요 가 없습니다
  • 만약 에 신 구 VNode 가 모두 정적 이 고 그들의 key 가 같다 면(같은 노드 를 대표 한다)새로운 VNode 가 clone 이거 나 once(v-once 속성 을 표시 하고 한 번 만 렌 더 링 한다)elm 와 componentInstance 를 교체 하면 된다.
  • vnode.text 가 텍스트 노드 가 아니라면 새 노드 는 모두 children 서브 노드 가 있 고 새 노드 의 서브 노드 가 다 를 때 서브 노드 에 diff 작업 을 하고 updateChildren 을 호출 합 니 다.이 updateChildren 도 diff 의 핵심 입 니 다.
  • 만약 에 오래된 노드 에 서브 노드 가 없고 새로운 노드 에 서브 노드 가 존재 한다 면 먼저 오래된 노드 DOM 의 텍스트 내용 을 비우 고 현재 DOM 노드 에 서브 노드 를 추가 합 니 다
  • 새 노드 에 하위 노드 가 없고 오래된 노드 에 하위 노드 가 있 을 때 이 DOM 노드 의 모든 하위 노드 를 제거 합 니 다.
  • 새 노드 가 모두 하위 노드 가 없 을 때 텍스트 의 교체 일 뿐이다.
  • updateChildren
    우리 페이지 의 dom 은 트 리 구조 입 니 다.위 에서 말 한 patchVnode 방법 은 같은 dom 요 소 를 재 활용 하 는 것 입 니 다.만약 에 신 구 두 VNnode 대상 이 모두 하위 요소 가 있다 면 우 리 는 어떻게 재 활용 요 소 를 비교 해 야 합 니까?이것 이 바로 우리 updateChildren 방법 이 해 야 할 일이 다.
    
    /*
      diff    ,    
    */
    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) {
        if (isUndef(oldStartVnode)) {
          /*    */
          oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
        } else if (isUndef(oldEndVnode)) {
          /*    */
          oldEndVnode = oldCh[--oldEndIdx]
        } else if (sameVnode(oldStartVnode, newStartVnode)) {
          /*          key   ,      VNode,   patchVnode  ,    oldCh  newCh     2*2=4   */
          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  VNode key      (       undefined      ,         key    )
              childre     [{xx: xx, key: 'key0'}, {xx: xx, key: 'key1'}, {xx: xx, key: 'key2'}]  beginIdx = 0   endIdx = 2  
                {key0: 0, key1: 1, key2: 2}
          */
          if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
    
          /*  newStartVnode  VNode    key    key oldVnode            idxInOld(      ,  )*/
          idxInOld = isDef(newStartVnode.key)
            ? oldKeyToIdx[newStartVnode.key]
            : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
          if (isUndef(idxInOld)) { // New element
            /*newStartVnode  key    key                  */
            createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
          } else {
            /*   key    */
            vnodeToMove = oldCh[idxInOld]
            if (sameVnode(vnodeToMove, newStartVnode)) {
              /*   VNode       key       VNode   patchVnode*/
              patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue, newCh, newStartIdx)
              /*    patchVnode   ,          undefined,             key               key*/
              oldCh[idxInOld] = undefined
              /*     canMove       oldStartVnode     Dom    */
              canMove && nodeOps.insertBefore(parentElm, vnodeToMove.elm, oldStartVnode.elm)
            } else {
              // same key but different element. treat as new element
              /*   VNode      key VNode  sameVNode   (   tag          type input  ),        */
              createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm, false, newCh, newStartIdx)
            }
          }
          newStartVnode = newCh[++newStartIdx]
        }
      }
      if (oldStartIdx > oldEndIdx) {
        /*        ,  oldStartIdx > oldEndIdx  ,           ,        ,                           Dom */
        refElm = isUndef(newCh[newEndIdx + 1]) ? null : newCh[newEndIdx + 1].elm
        addVnodes(parentElm, refElm, newCh, newStartIdx, newEndIdx, insertedVnodeQueue)
      } else if (newStartIdx > newEndIdx) {
        /*            newStartIdx > newEndIdx,            ,        ,                Dom   */
        removeVnodes(oldCh, oldStartIdx, oldEndIdx)
      }
    }
    
    다음은 다른 블 로 거들 의 글 을 복사 한 것 입 니 다.잘 썼 다 고 생각 하 는 원문 주소:github.com/liutao/vue2…
    언뜻 보기에 이 코드 는 좀 어리둥절 한 것 같다.구체 적 인 내용 은 사실 복잡 하지 않다.우 리 는 먼저 전체 판단 절 차 를 대충 본 다음 에 몇 가지 예 를 통 해 상세 하 게 살 펴 보 자.
    oldstartIdx,newStartIdx,oldEndIdx,newEndIdx 는 모두 지침 입 니 다.구체 적 으로 모든 것 이 무엇 을 가리 키 는 지 잘 알 고 있 을 것 이 라 고 믿 습 니 다.우리 가 전체 비교 하 는 과정 은 끊임없이 지침 을 이동 할 것 입 니 다.
    oldstartVnode,newStartVnode,oldEndVnode,newEndVnode 는 위의 지침 과 일일이 대응 하여 그들 이 가리 키 는 VNode 결점 이다.
    while 순환 은 oldCh 나 newCh 반복 이 끝 난 후에 멈 춥 니 다.그렇지 않 으 면 순환 절 차 를 계속 실행 합 니 다.전체 절 차 는 다음 과 같은 몇 가지 상황 으로 나 뉜 다.
    1.oldstartVnode 가 정의 되 지 않 으 면 oldch 배열 이 옮 겨 다 니 는 시작 지침 을 한 자리 옮 깁 니 다.
    
      if (isUndef(oldStartVnode)) {
        oldStartVnode = oldCh[++oldStartIdx] // Vnode has been moved left
      }
    
    주:일곱 번 째 상황 을 보면 key 값 이 같 으 면 undefined 로 설정 할 수 있 습 니 다.
    2.oldEndVnode 가 정의 되 지 않 으 면 oldCh 배열 이 옮 겨 다 니 는 시작 포인터 가 한 자리 앞으로 이동 합 니 다.
    
      else if (isUndef(oldEndVnode)) {
        oldEndVnode = oldCh[--oldEndIdx]
      } 
    
    주:일곱 번 째 상황 을 보면 key 값 이 같 으 면 undefined 로 설정 할 수 있 습 니 다.
    3.sameVnode(oldstartVnode,newStartVnode)는 두 배열 의 시작 포인터 가 가리 키 는 대상 을 재 활용 할 수 있 는 지 판단 합 니 다.실제 로 돌아 가면 patchVnode 방법 으로 dom 요 소 를 재 활용 하고 하위 요 소 를 재 귀적 으로 비교 한 다음 oldCh 와 newCh 의 시작 지침 을 각각 옮 깁 니 다.
    
      else if (sameVnode(oldStartVnode, newStartVnode)) {
        patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
        oldStartVnode = oldCh[++oldStartIdx]
        newStartVnode = newCh[++newStartIdx]
      }
    
    4.sameVnode(oldEndVnode,newEndVnode)는 두 배열 의 끝 포인터 가 가리 키 는 대상 을 재 활용 할 수 있 는 지 판단 합 니 다.실제 로 돌아 가면 patchVnode 방법 으로 dom 요 소 를 재 활용 하고 하위 요 소 를 재 귀적 으로 비교 한 다음 oldCh 와 newCh 의 끝 포인터 가 각각 한 자리 씩 이동 합 니 다.
    
      else if (sameVnode(oldEndVnode, newEndVnode)) {
        patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
        oldEndVnode = oldCh[--oldEndIdx]
        newEndVnode = newCh[--newEndIdx]
      } 
    
    5.sameVnode(oldstartVnode,newEndVnode)는 oldCh 시작 포인터 가 가리 키 는 대상 과 newCh 끝 포인터 가 가리 키 는 대상 을 재 활용 할 수 있 는 지 판단 합 니 다.실제 로 돌아 가면 patchVnode 방법 으로 dom 요 소 를 재 활용 하고 하위 요 소 를 재 귀적 으로 비교 합 니 다.재 활용 요 소 는 new Ch 에서 끝 포인터 가 가리 키 는 요소 이기 때문에 oldEndVnode.elm 앞 에 삽입 합 니 다.마지막 으로 oldCh 의 시작 포인 터 를 한 자리 뒤로 옮 기 고 new Ch 의 시작 포인 터 를 각각 한 자리 씩 옮 깁 니 다.
    
      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]
      }
    
    6.sameVnode(oldEndVnode,newStartVnode)는 oldCh 종료 포인터 가 가리 키 는 대상 과 newCh 시작 포인터 가 가리 키 는 대상 을 재 활용 할 수 있 는 지 판단 합 니 다.실제 로 돌아 가면 patchVnode 방법 으로 dom 요 소 를 재 활용 하고 하위 요 소 를 재 귀적 으로 비교 합 니 다.재 활용 요 소 는 new Ch 에서 시작 포인터 가 가리 키 는 요소 이기 때문에 oldstartVnode.elm 앞 에 삽입 합 니 다.마지막 으로 oldCh 의 끝 포인터 가 한 자리 앞으로 이동 하고 new Ch 의 시작 포인터 가 각각 한 자리 뒤로 이동 합 니 다.
    
      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]
      }
    
    7.상기 여섯 가지 상황 이 모두 만족 하지 않 으 면 여기까지 온다.앞의 비 교 는 모두 두미 조합의 비교 이다.이곳 의 상황 은 약간 복잡 하 다.사실은 주로 key 값 에 따라 요 소 를 재 활용 하 는 것 이다.
    ① oldCh 배열 을 옮 겨 다 니 며 키 가 있 는 대상 을 찾 아 키 를 키 로 하고 색인 값 을 value 로 하여 새로운 대상 oldKeyToIdx 를 생 성 한다.
    
    if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
    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
    }
    
    ② new StartVnode 에 key 값 이 있 는 지 확인 하고 oldKeyToIdx 에 같은 key 가 있 는 지 찾 습 니 다.
    
      idxInOld = isDef(newStartVnode.key) ? oldKeyToIdx[newStartVnode.key] : null
    
    ③ new StartVnode 에 key 나 oldKeyToIdx 가 같은 key 가 없 으 면 createElm 방법 으로 새 요 소 를 만 들 고 new Ch 의 시작 색인 을 한 자리 옮 깁 니 다.
    
      if (isUndef(idxInOld)) { // New element
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
        newStartVnode = newCh[++newStartIdx]
      } 
    
    ④ elmToMove 는 이동 할 요 소 를 저장 합 니 다.sameVnode(elmToMove,new StartVnode)가 진짜 로 돌아 오 면 재 활용 할 수 있 음 을 설명 합 니 다.이 때 patchVnode 방법 으로 dom 요 소 를 재 활용 하고 하위 요 소 를 재 귀적 으로 비교 합 니 다.oldCh 에 있 는 요 소 를 undefined 로 리 셋 한 다음 에 현재 요 소 를 oldstartVnode.elm 앞 에 삽입 하고 new Ch 의 시작 색인 을 한 번 이동 합 니 다.sameVnode(elmToMove,newStartVnode)가 가 짜 를 되 돌려 줍 니 다.예 를 들 어 tag 이름 이 다 르 면 createElm 방법 으로 새 요 소 를 만 들 고 new Ch 의 시작 색인 을 한 자리 옮 깁 니 다.
    
      elmToMove = oldCh[idxInOld]
      if (sameVnode(elmToMove, newStartVnode)) {
        patchVnode(elmToMove, newStartVnode, insertedVnodeQueue)
        oldCh[idxInOld] = undefined
        canMove && nodeOps.insertBefore(parentElm, newStartVnode.elm, oldStartVnode.elm)
        newStartVnode = newCh[++newStartIdx]
      } else {
        // same key but different element. treat as new element
        createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)
        newStartVnode = newCh[++newStartIdx]
      }
    
    이상 은 vue diff 알고리즘 을 사용 하 는 상세 한 내용 입 니 다.vue diff 알고리즘 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!

    좋은 웹페이지 즐겨찾기