Heim > Artikel > WeChat-Applet > Das Objekt von Diff ist ein virtueller Dom
Das Diff-Objekt, das ich Ihnen dieses Mal vorstelle, ist das virtuelle Dom-Objekt sehen. Virtueller 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-Algorithmus ist
Vnode-BasisklasseDieser Teil des Codes dient hauptsächlich dazu, die Bedeutung des Attributs
des spezifischen Diff-Ins besser zu verstehen Der Diff-Algorithmus kann natürlich auch geändert werden.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 }Die Kernfunktion ist die Patch-Funktion
isUndef-Urteil (ob undefiniert oder null)
// Mount leeren (wahrscheinlich als Komponente), neues Root-Element erstellencreateElm(vnode, insertedVnodeQueue) Hier Sie können feststellen, dass beim Erstellen von Knoten nicht ein einzelner Knoten eingefügt wird, sondern ein
Einheitliche Stapelverarbeitung in der Warteschlangefunction 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) ) ) ) }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
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; }
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)
// destroy old node if (isDef(parentElm)) { removeVnodes(parentElm, [oldVnode], 0, 0) } else if (isDef(oldVnode.tag)) { invokeDestroyHook(oldVnode) }
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
Kernfunktion
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) } } }
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.
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, '') 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) } }
Vergleichen Sie, ob die beiden Referenzen konsistent sind
Ich weiß nicht, was asyncFactory danach macht, also kann ich es nicht Verstehen Sie diesen Vergleich
Wenn vnode ein Textknoten oder Anmerkungsknoten ist, aber vnode.text != oldVnode.text, müssen Sie nur den Textinhalt von vnode.elm aktualisieren
Vergleich der untergeordneten Knoten
Wenn nur vnode untergeordnete Knoten hat, dann erstellen Sie diese untergeordneten Knoten. Wenn oldVnode ein Textknoten ist, setzen Sie den Text von vnode.elm auf eine leere
ZeichenfolgeWenn beide sind verfügbar, updateChildren wird später detailliert beschrieben.
Wenn weder oldVnode noch vnode untergeordnete Knoten haben, oldVnode jedoch ein Textknoten oder Anmerkungsknoten ist, legen Sie den Text fest vnode.elm in einen leeren String
Der Fokus dieses Teils liegt immer noch auf dem gesamten AlgorithmusZuerst vier Zeiger, oldStart, oldEnd, newStart, newEnd, zwei Arrays, oldVnode, Vnode .
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 <= newEndIdxfunction 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) } }
oldStart === newStart, oldStart++ newEnd --
oldEnd === newStart, oldEnd wird am Anfang der Warteschlange oldEnd-- newStart++
eingefügt剩下的所有情况都走这个处理简单的说也就两种处理,处理后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) }
简单的说就是循环结束后,看四个指针中间的内容,old数组中和new数组中,多退少补而已
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
Das obige ist der detaillierte Inhalt vonDas Objekt von Diff ist ein virtueller Dom. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!