vue 가상 dom 의 patch 소스 분석

본 고 는 vue 가상 dom 의 patch 소스 코드 분석 을 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.
원본 디 렉 터 리:src/core/vdom/patch.js

 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

    const canMove = !removeOnly

  while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { //           ，   
   if (isUndef(oldStartVnode)) {
    oldStartVnode = oldCh[++oldStartIdx] // Vnode      。
   } else if (isUndef(oldEndVnode)) {
    oldEndVnode = oldCh[--oldEndIdx]
   } else if (sameVnode(oldStartVnode, newStartVnode)) {
    patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
    oldStartVnode = oldCh[++oldStartIdx] //    1。         。    start=a[0]，   start=a[1],  start       start  vnode
    newStartVnode = newCh[++newStartIdx]
     
   } else if (sameVnode(oldEndVnode, newEndVnode)) { 
    patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
    oldEndVnode = oldCh[--oldEndIdx]
    newEndVnode = newCh[--newEndIdx]
   } else if (sameVnode(oldStartVnode, newEndVnode)) { 
    patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)
    canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))//    b       
    oldStartVnode = oldCh[++oldStartIdx]
    newEndVnode = newCh[--newEndIdx]
     
   } else if (sameVnode(oldEndVnode, newStartVnode)) {  old.end.d=new.start.d
    patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)
    canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)// Vnode moved left, d  c   。=old.start->old.end
    oldEndVnode = oldCh[--oldEndIdx] 
    newStartVnode = newCh[++newStartIdx] 

   } else {
    if (isUndef(oldKeyToIdx)) oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx)
    idxInOld = isDef(newStartVnode.key)
     ? oldKeyToIdx[newStartVnode.key]
     : findIdxInOld(newStartVnode, oldCh, oldStartIdx, oldEndIdx)
    if (isUndef(idxInOld)) { 
     createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm) //      ，     nodeOps.insertBefore(parent, elm, ref)
    } else {
     vnodeToMove = oldCh[idxInOld]
     /* istanbul ignore if */
     if (process.env.NODE_ENV !== 'production' && !vnodeToMove) {
      warn(
       'It seems there are duplicate keys that is causing an update error. ' +
       'Make sure each v-for item has a unique key.'
      )
     }
     if (sameVnode(vnodeToMove, newStartVnode)) {
      patchVnode(vnodeToMove, newStartVnode, insertedVnodeQueue)
      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)
     }
    }
    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(parentElm, oldCh, oldStartIdx, oldEndIdx) //     c,removeNode(ch.elm)

  }
 }

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)
   )
  )
 )
}

/**
   *     vnode  ，        dom        （  ，  ，  ）          prepatch,update,postpatch     ，              ，     
   * @param oldVnode               ，                      vnode    children，  updateChildren         ，
   * @param vnode
   * @param insertedVnodeQueue
   * @param removeOnly
   */
 function patchVnode (oldVnode, vnode, insertedVnodeQueue, removeOnly) {
  if (oldVnode === vnode) {
   return
  }

  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
  }

   //           。
    //   ，  vnode    ，      。
    //           ，       。
    //      api    ，             。
  if (isTrue(vnode.isStatic) &&
   isTrue(oldVnode.isStatic) &&
   vnode.key === oldVnode.key &&
   (isTrue(vnode.isCloned) || isTrue(vnode.isOnce))
  ) {
   vnode.componentInstance = oldVnode.componentInstance
   return
  }

  let i
  const data = vnode.data
  if (isDef(data) && isDef(i = data.hook) && isDef(i = i.prepatch)) {
   i(oldVnode, vnode)
  }

  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)) {
   if (isDef(oldCh) && isDef(ch)) {
    if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue, removeOnly)
   } else if (isDef(ch)) {
    if (isDef(oldVnode.text)) nodeOps.setTextContent(elm, '')
    addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
   } else if (isDef(oldCh)) {
    removeVnodes(elm, oldCh, 0, oldCh.length - 1)
   } else if (isDef(oldVnode.text)) {
    nodeOps.setTextContent(elm, '')
   }
  } else if (oldVnode.text !== vnode.text) {
   nodeOps.setTextContent(elm, vnode.text)
  }
  if (isDef(data)) {
   if (isDef(i = data.hook) && isDef(i = i.postpatch)) i(oldVnode, vnode)
  }
 }

function insertBefore (parentNode, newNode, referenceNode) {
 parentNode.insertBefore(newNode, referenceNode);
}

/**
   *
   * @param vnode  vnode          dom  ，  vnode children         ，    createElm  ，
   * @param insertedVnodeQueue            ，     dom             vnode，   vnode           dom   ，          vnode hook insert  
   * @param parentElm
   * @param refElm
   * @param nested
   */

   let inPre = 0
 function createElm (vnode, insertedVnodeQueue, parentElm, refElm, nested) {
  vnode.isRootInsert = !nested //       
  if (createComponent(vnode, insertedVnodeQueue, parentElm, refElm)) {
   return
  }

  const data = vnode.data
  const children = vnode.children
  const tag = vnode.tag
  if (isDef(tag)) {
   if (process.env.NODE_ENV !== 'production') {
    if (data && data.pre) {
     inPre++
    }
    if (
     !inPre &&
     !vnode.ns &&
     !(
      config.ignoredElements.length &&
      config.ignoredElements.some(ignore => {
       return isRegExp(ignore)
        ? ignore.test(tag)
        : ignore === tag
      })
     ) &&
     config.isUnknownElement(tag)
    ) {
     warn(
      'Unknown custom element: <' + tag + '> - did you ' +
      'register the component correctly? For recursive components, ' +
      'make sure to provide the "name" option.',
      vnode.context
     )
    }
   }
   vnode.elm = vnode.ns
    ? nodeOps.createElementNS(vnode.ns, tag)
    : nodeOps.createElement(tag, vnode)
   setScope(vnode)

   /* istanbul ignore if */
   if (__WEEX__) {
    // in Weex, the default insertion order is parent-first.
    // List items can be optimized to use children-first insertion
    // with append="tree".
    const appendAsTree = isDef(data) && isTrue(data.appendAsTree)
    if (!appendAsTree) {
     if (isDef(data)) {
      invokeCreateHooks(vnode, insertedVnodeQueue)
     }
     insert(parentElm, vnode.elm, refElm)
    }
    createChildren(vnode, children, insertedVnodeQueue)
    if (appendAsTree) {
     if (isDef(data)) {
      invokeCreateHooks(vnode, insertedVnodeQueue)
     }
     insert(parentElm, vnode.elm, refElm)
    }
   } else {
    createChildren(vnode, children, insertedVnodeQueue)
    if (isDef(data)) {
     invokeCreateHooks(vnode, insertedVnodeQueue)
    }
    insert(parentElm, vnode.elm, refElm)
   }

   if (process.env.NODE_ENV !== 'production' && data && data.pre) {
    inPre--
   }
  } else if (isTrue(vnode.isComment)) {
   vnode.elm = nodeOps.createComment(vnode.text)
   insert(parentElm, vnode.elm, refElm)
  } else {
   vnode.elm = nodeOps.createTextNode(vnode.text)
   insert(parentElm, vnode.elm, refElm)
  }
 }
function insert (parent, elm, ref) {
  if (isDef(parent)) {
   if (isDef(ref)) {
    if (ref.parentNode === parent) {
     nodeOps.insertBefore(parent, elm, ref)
    }
   } else {
    nodeOps.appendChild(parent, elm)
   }
  }
 }

function removeVnodes (parentElm, vnodes, startIdx, endIdx) {
  for (; startIdx <= endIdx; ++startIdx) {
   const ch = vnodes[startIdx]
   if (isDef(ch)) {
    if (isDef(ch.tag)) {
     removeAndInvokeRemoveHook(ch)
     invokeDestroyHook(ch)
    } else { // Text node
     removeNode(ch.elm)
    }
   }
  }
 }

updateChildren방법 은 주로while순환 을 통 해 2 그루 나무의 서브 노드 를 비교 하여 업데이트dom하고 새로운 것 을 비교 하여 낡은 것 을 바 꾸 어 신 구 통일 의 목적 을 달성 하도록 한다.
하나의 예 를 통 해 모 의 해 보 자.
만약 에 신 구 2 그루 의 나무 가 있다 고 가정 하면 나무의 서브 노드 는 각각a,b,c,d등 으로 서로 다른 번호 가 서로 다른vnode를 나타 낸다.예 를 들 어:

상 태 를 설정 한 후에 우 리 는 첫 번 째 비 교 를 시작 했다.이때oldStartVnode=a,newStartVnode=a;는sameVnode(oldStartVnode,newStartVnode)논 리 를 명중 시 켰 고patchVnode(oldStartVnode,newStartVnode,insertedVnodeQueue)방법 으로 노드a를 직접 호출 했다.이 어oldStartIdx와newStartIdx색인 을 각각+1 했다.그림 과 같다.

노드a를 업데이트 한 후에 우 리 는 두 번 째 비 교 를 시작 했다.이때oldStartVnode=b,newEndVnode=b;는sameVnode(oldStartVnode,newEndVnode)논 리 를 명중 시 켰 고 호출patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue)방법 으로 노드b를 업데이트 했다.이어서 호출canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))하고 노드b를 나무의 맨 오른쪽 으로 옮 겼 다.마지막 으로oldStartIdx색인+1,newEndIdx색인-1 을 그림 과 같다.

노드b를 업데이트 한 후에 우 리 는 세 번 째 비 교 를 시작 했다.이때oldEndVnode=d,newStartVnode=d;는sameVnode(oldEndVnode, newStartVnode)논 리 를 명중 시 켰 고patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue)방법 으로 노드d를 업데이트 했다.이 어 호출canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm)을d의 왼쪽 으로 옮 겼 다.마지막 으로c색인-1,oldEndIdx색인+1 을 그림 과 같이:

업데이트newStartIdx를 마 친 후에 우 리 는 네 번 째 비 교 를 시작 했다.이때d노드newStartVnode=e는 오래된 나무 에 없 기 때문에 새로운 요소 로 삽입 되 어야 한다.호출e,그 다음 에createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)방법 으로nodeOps.insertBefore(parent, elm, ref)을e에 삽입 하기 전에c색인+1 을 실행 했다.그림 과 같다.

노드newStartIdx를 삽입 한 후에 우 리 는e이newStartIdx보다 크 고newEndIdx순환 이 이미 끝났다 는 것 을 볼 수 있다.이 어 호출while에서 오래된removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)을 삭제 합 니 다.마지막 으로 그림 과 같 습 니 다.
c상기 몇 단계 작업 을 통 해 오래된 나무 노드 의 업 데 이 트 를 완 성 했 고 실제 적 으로 비교적 작은updateChildren작업 만 사용 하여 성능 이 향상 되 었 으 며 서브 노드 가 복잡 할 수록 이런 향상 효과 가 현저 하 다.domvnode방법 으로 생 성patch한 후 호출dom합 니 다.이로써 전체mounted hook인 스 턴 스 가 생 성 되 었 습 니 다.이vue인 스 턴 스vue가 데이터 변 화 를 관찰 할 때 두 번 호출watcher방법 으로 새로운render을 생 성 합 니 다.이 어 호출vnode방법 으로 신 구patch와 비교 하여 업데이트 합 니 다vnode.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.