vue에서 가상 DOM 패치 구현(자세한 튜토리얼)

이 글은 주로 Vue Virtual DOM의 패치 소스 코드 분석을 소개하고 있습니다.

이 글에서는 Vue Virtual DOM의 패치 소스 코드 분석을 소개하고, 자세한 내용은 다음과 같습니다.

소스 코드 디렉터리: src/core/vdom/patch.jssrc/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 !== &#39;production&#39; && !vnodeToMove) {
      warn(
       &#39;It seems there are duplicate keys that is causing an update error. &#39; +
       &#39;Make sure each v-for item has a unique key.&#39;
      )
     }
     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, &#39;&#39;)
    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, &#39;&#39;)
   }
  } 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 !== &#39;production&#39;) {
    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(
      &#39;Unknown custom element: <&#39; + tag + &#39;> - did you &#39; +
      &#39;register the component correctly? For recursive components, &#39; +
      &#39;make sure to provide the "name" option.&#39;,
      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 !== &#39;production&#39; && 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后，我们开始第2遍比较，此时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的左边。最后把oldEndIdx索引-1，newStartIdx索引+1，如图：

更新完d后，我们开始第4遍比较，此时newStartVnode=e,节点e在旧树里是没有的，因此应该被作为一个新的元素插入，调用createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm)，后面执行了nodeOps.insertBefore(parent, elm, ref)方法把e插入到c之前，接着把newStartIdx索引+1，如图：

插入节点e后，我们可以看到newStartIdx已经大于newEndIdx了，while循环已经完毕。接着调用removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx) 删除旧的c,最终如图：

updateChildren通过以上几步操作完成了旧树子节点的更新，实际上只用了比较小的dom操作，在性能上有所提升，并且当子节点越复杂，这种提升效果越明显。vnode通过patch方法生成dom后，会调用mounted hook，至此，整个vue实例就创建完成了，当这个vue实例的watcher观察到数据变化时，会两次调用render方法生成新的vnode,接着调用patch方法对比新旧vnode来更新dom

rrreee

rrreee

updateChildren이 메서드는 주로 while 루프를 사용하여 dom을 업데이트할 두 트리의 하위 노드는 기존과 새를 통합하려는 목적을 달성하기 위해 새 항목을 비교하여 이전 항목을 변경합니다.
예를 들어 시뮬레이션해 보세요.

오래된 트리와 새 트리가 있다고 가정합니다. 트리의 하위 노드는 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, insertVnodeQueue) 메서드는 다음과 같습니다. b 노드를 업데이트하기 위해 호출된 다음 canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm))를 호출하여 노드를 이동합니다. b를 트리의 가장 오른쪽에 추가하고 마지막으로 그림과 같이 oldStartIdx 인덱스 +1, newEndIdx 인덱스 -1을 추가합니다.

업데이트 후 node b, 세 번째 비교를 시작합니다. 이때 oldEndVnode=d, newStartVnode=d;는 sameVnode(oldEndVnode, newStartVnode)에 도달합니다. 논리를 호출한 다음 patchVnode(oldEndVnode, newStartVnode, insertVnodeQueue)메소드 업데이트 노드 d를 호출한 다음 canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode를 호출합니다. .elm)를 사용하여 d를 이동합니다. c의 왼쪽입니다. 마지막으로 그림에 표시된 대로 oldEndIdx를 -1로, newStartIdx를 +1로 색인화합니다.

🎜🎜d를 업데이트한 후 네 번째를 시작합니다. 비교, 이때 newStartVnode=e, 노드 e는 이전 트리에 존재하지 않으므로 createElm()을 호출하여 삽입해야 합니다. newStartVnode, insertVnodeQueue, parentElm, oldStartVnode.elm)를 수행한 다음 nodeOps.insertBefore(parent, elm, ref) 메서드를 실행하여 e를 c앞에 그림과 같이 newStartIdx 인덱스 +1을 추가합니다. 🎜

🎜🎜노드 e를 삽입하면 를 볼 수 있습니다. newStartIdx가 newEndIdx보다 크면 while 루프가 완료되었습니다. 그런 다음 마지막 그림에 표시된 대로 removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx)를 호출하여 이전 c를 삭제합니다. 🎜

🎜🎜updateChildren팔로우 위의 단계를 통해 이전 트리의 하위 노드 업데이트가 완료되었습니다. 실제로 상대적으로 작은 dom 작업만 사용되므로 하위 노드가 더 복잡해지면 성능이 향상됩니다. 효과는 더 확실합니다. vnode가 patch 메서드를 통해 dom을 생성한 후 마운트된 후크가 이 시점에서 호출됩니다. code>vue code> 인스턴스가 생성됩니다. 이 vue 인스턴스의 watcher가 데이터 변경을 관찰하면 render 메서드가 생성됩니다. 두 번 호출하여 새 vnode를 생성한 다음 patch 메서드를 호출하여 이전 vnode를 비교하여 dom을 업데이트합니다. code>.🎜🎜위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜JQuery는 select 컴포넌트🎜🎜🎜🎜🎜$set의 선택된 값 메소드를 선택하고 vue.js_vue.js🎜🎜🎜🎜🎜vue는 vue-i18n과 결합되어 배경을 구현합니다. 데이터 다국어 전환 방식🎜🎜🎜🎜🎜<p class="clearfix"><span class="jbTestPos"></span></p>

위 내용은 vue에서 가상 DOM 패치 구현(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!