Detaillierte Erläuterung der Verwendung des Diff-Algorithmus

Dieses Mal werde ich Ihnen die Verwendung des Diff-Algorithmus ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Diff-Algorithmus? Das Folgende ist ein praktischer Fall.

zVirtueller Dom

Der Diff-Algorithmus muss zunächst das Konzept klären, dass das Objekt von Diff der virtuelle Dom ist und die Aktualisierung des realen Doms das Ergebnis des Diff ist Algorithmus

Vnode-Basisklasse

 constructor (
  。。。
 ) {
  this.tag = tag
  this.data = data
  this.children = children
  this.text = text
  this.elm = elm
  this.ns = undefined
  this.context = context
  this.fnContext = undefined
  this.fnOptions = undefined
  this.fnScopeId = undefined
  this.key = data && data.key
  this.componentOptions = componentOptions
  this.componentInstance = undefined
  this.parent = undefined
  this.raw = false
  this.isStatic = false
  this.isRootInsert = true
  this.isComment = false
  this.isCloned = false
  this.isOnce = false
  this.asyncFactory = asyncFactory
  this.asyncMeta = undefined
  this.isAsyncPlaceholder = false
 }

Dieser Teil des Codes dient hauptsächlich dazu, die Bedeutung des Attributs des spezifischen Diffs besser zu verstehen Diff-Algorithmus. Natürlich kann es auch die Vnode-Instanz besser verstehen

Der Gesamtprozess

Die Kernfunktion ist die Patch-Funktion

• isUndef-Urteil (ob undefiniert oder null)

• // leerer Mount (wahrscheinlich als Komponente), neues Root-Element erstellencreateElm(vnode, insertedVnodeQueue) Hier finden Sie das Das Erstellen von Knoten wird nicht einzeln eingefügt, sondern in eine Warteschlange gestellt. Einheitliche Stapelverarbeitung

• Kernfunktion sameVnode

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

Hier ist eine Äußere Vergleichsfunktion, die zwei Knoten direkt vergleicht. Vergleich von Schlüssel, Tag (Tag), Daten (beachten Sie, dass sich Daten hier auf VNodeData beziehen) und direkter Vergleich des Typs für die Eingabe.

export interface VNodeData {
 key?: string | number;
 slot?: string;
 scopedSlots?: { [key: string]: ScopedSlot };
 ref?: string;
 tag?: string;
 staticClass?: string;
 class?: any;
 staticStyle?: { [key: string]: any };
 style?: object[] | object;
 props?: { [key: string]: any };
 attrs?: { [key: string]: any };
 domProps?: { [key: string]: any };
 hook?: { [key: string]: Function };
 on?: { [key: string]: Function | Function[] };
 nativeOn?: { [key: string]: Function | Function[] };
 transition?: object;
 show?: boolean;
 inlineTemplate?: {
  render: Function;
  staticRenderFns: Function[];
 };
 directives?: VNodeDirective[];
 keepAlive?: boolean;
}

Dadurch wird bestätigt, ob die beiden Knoten einen weiteren Vergleich wert sind, andernfalls werden sie direkt ersetzt.

Der Ersetzungsprozess ist hauptsächlich eine createElm-Funktion und der andere die Zerstörung von oldVNode

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

Der Einfügungsprozess besteht einfach darin, den Typ des Knotens zu bestimmen und

createComponent aufzurufen (es ermittelt, ob Kinder vorhanden sind, und ruft es dann rekursiv auf)

createComment

createTextNode

Verwenden Sie nach der Erstellung die Einfügefunktion

Danach müssen Sie die Hydrate-Funktion verwenden, um den virtuellen Dom und den realen Dom abzubilden

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

Kernfunktion

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

const el = vnode.el = oldVnode.el Dies ist ein sehr wichtiger Schritt. Lassen Sie vnode.el auf den aktuellen Real verweisen dom. Wenn el geändert wird, ändert sich vnode.el synchron.

1. Vergleichen Sie, ob die beiden Referenzen konsistent sind

2. Ich weiß nicht, was asyncFactory danach macht, also kann ich es nicht Verstehen Sie diesen Vergleich

3. Statischer Knotenvergleichsschlüssel, danach wird kein erneutes Rendern durchgeführt, kopieren Sie direkt die KomponenteInstanz (sobald der Befehl hier wirksam wird)

4. Wenn vnode ein Textknoten oder ein Kommentarknoten ist, aber wenn vnode.text != oldVnode.text ist, müssen Sie nur den Textinhalt von vnode.elm

<🎜 aktualisieren >
5. Vergleich der untergeordneten Knoten

• Wenn nur oldVnode untergeordnete Knoten hat, dann löschen Sie diese Knoten

• Wenn nur vnode hat untergeordnete Knoten. Wenn oldVnode ein Textknoten ist, legen Sie den Text von vnode.elm auf eine leere

  Zeichenfolge

• fest , updateChildren wird aktualisiert.

• Wenn weder oldVnode noch vnode untergeordnete Knoten haben, oldVnode jedoch ein Textknoten oder Anmerkungsknoten ist, legen Sie den Text von vnode.elm fest zu einem leeren String

updateChildren

Der Fokus dieses Teils liegt immer noch auf dem gesamten Algorithmus

Erste vier Zeiger, oldStart, oldEnd, newStart, newEnd, zwei Arrays, oldVnode, Vnode .

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
  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)) {
    patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue)
    oldStartVnode = oldCh[++oldStartIdx]
    newStartVnode = newCh[++newStartIdx]
   } else if (sameVnode(oldEndVnode, newEndVnode)) {
    patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue)
    oldEndVnode = oldCh[--oldEndIdx]
    newEndVnode = newCh[--newEndIdx]
   } 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]
   } 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]
   } 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)
      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]
   }
  }
  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)
  }
 }

Mehrere Situationen und Verarbeitung eines Schleifenvergleichs (das folgende ++ – alle beziehen sich auf das ++ des Index –) Der Vergleich ist der zu vergleichende Knoten. Die Abkürzung ist nicht streng der Vergleich wird verwendet. Die Funktion sameVnode ist nicht wirklich kongruent

Die Bedingung dafür, dass die gesamte Schleife nicht endet oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx

1. oldStart === newStart, oldStart++ newEnd --

2. oldEnd === newStart, oldEnd wird am Anfang der Warteschlange eingefügt oldEnd-- newStart++

3. Alle verbleibenden Situationen werden auf diese Weise behandelt. Vereinfacht gesagt gibt es nach der Verarbeitung zwei Prozesse: newStart++

• newStart在old中发现一样的那么将这个移动到oldStart前

• 没有发现一样的那么创建一个放到oldStart之前

循环结束后并没有完成

还有一段判断才算完

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)
  }
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
JS EventEmitter使用详解

json数组键值大小写怎么转换（附代码）
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung des Diff-Algorithmus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!