Implémenter le patch dom virtuel dans vue (tutoriel détaillé)

Cet article présente principalement l'analyse du code source du patch de vue virtual dom. Maintenant, je le partage avec vous et vous donne une référence.

Cet article présente l'analyse du code source du patch de vue virtual dom et le partage avec tout le monde. Les détails sont les suivants :

Répertoire du code source : 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 !== &#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)
    }
   }
  }
 }

la méthode met principalement à jour updateChildren en comparant les nœuds enfants de deux arbres via la boucle while. Contrastez le nouveau pour changer l'ancien afin d'atteindre l'objectif d'unifier l'ancien et le nouveau. dom

Simulons-le à travers un exemple :

Supposons qu'il y ait deux arbres, ancien et nouveau. Les nœuds enfants dans l'arbre sont représentés par

et ainsi de suite. les noms représentent différents a,b,c,d, tels que : vnode

Après avoir défini le statut, nous commençons la première comparaison. À ce moment,

atteint la logique oldStartVnode=a,newStartVnode=a;, puis appelle directement sameVnode(oldStartVnode,newStartVnode) La méthode met à jour le nœud patchVnode(oldStartVnode,newStartVnode,insertedVnodeQueue), puis ajoute 1 aux index a et oldStartIdx respectivement, comme le montre la figure : newStartIdx

Après la mise à jour du nœud

, on démarre la suivante. Après 2 passes de comparaison, lorsque a atteint la logique oldStartVnode=b,newEndVnode=b;, la méthode sameVnode(oldStartVnode,newEndVnode) est appelée pour mettre à jour le nœud patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue), puis b est appelé pour déplacer le nœud canMove && nodeOps.insertBefore(parentElm, oldStartVnode.elm, nodeOps.nextSibling(oldEndVnode.elm)) à l'extrême droite de l'arbre, et enfin bIndex +1, oldStartIdxIndex -1, comme le montre la figure : newEndIdx

Après la mise à jour du nœud

, nous commençons la troisième comparaison, à ce moment b Si la logique oldEndVnode=d,newStartVnode=d; est atteinte, la méthode sameVnode(oldEndVnode, newStartVnode) est appelée pour mettre à jour le nœud patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue), et alors d est appelé à se déplacer canMove && nodeOps.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm) vers la gauche de d. Enfin, c indice -1, oldEndIdx indice +1, comme le montre la figure : newStartIdx

Après la mise à jour

, on démarre la quatrième comparaison à. cette fois d, le nœud newStartVnode=e n'existe pas dans l'ancien arbre, il doit donc être inséré en tant que nouvel élément, appeler e, puis exécuter la méthode createElm(newStartVnode, insertedVnodeQueue, parentElm, oldStartVnode.elm) pour insérer nodeOps.insertBefore(parent, elm, ref) avant e , puis ajoutez c index +1, comme indiqué sur la figure : newStartIdx

Après avoir inséré le nœud

, nous pouvons voir que e est déjà plus grand que newStartIdx, newEndIdx Le cycle est terminé. Appelez ensuite while pour supprimer l'ancien removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx), comme indiqué dans la figure finale : c

La mise à jour des anciens sous-nœuds de l'arbre s'effectue via les étapes ci-dessus. En fait, seules des opérations updateChildren relativement petites sont utilisées, ce qui améliore les performances, et plus les nœuds enfants sont complexes, plus l'effet d'amélioration est évident. domAprès avoir généré vnode via la méthode patch, dom sera appelé à ce stade, l'instance mounted hook entière est créée Lorsque le vue de cette vue instance observe des changements de données, deux Appelez la méthode watcher une fois pour générer un nouveau render, puis appelez la méthode vnode pour comparer l'ancien et le nouveau patch afin de mettre à jour le vnode Ce qui précède dom

est quoi. J'ai compilé pour tout le monde. J'espère que cela sera utile à tout le monde à l'avenir.

Articles connexes :

Méthode de valeur sélectionnée JQuery du composant sélectionné

$set et tableau dans vue.js Mise à jour de method_vue .js

Vue et vue-i18n sont combinés pour implémenter une méthode de commutation multilingue des données d'arrière-plan

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!