資訊專欄INFORMATION COLUMN
摘要：如果新節點不是克隆的，則表示呈現函數。由熱重加載重新設置，我們需要進行適當的重新渲染。接著調用刪除舊的最終如圖通過以上幾步操作完成了舊樹子節點的更新，實際上只用了比較小的操作，在性能上有所提升，并且當子節點越復雜，這種提升效果越明顯。
源碼目錄：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后，我們開始第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.
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92972.html
摘要：很多人認為虛擬最大的優勢是算法，減少操作真實的帶來的性能消耗。雖然這一個虛擬帶來的一個優勢，但并不是全部。回到最開始的問題，虛擬到底是什么，說簡單點，就是一個普通的對象，包含了三個屬性。 是什么？ 虛擬 DOM （Virtual DOM ）這個概念相信大家都不陌生，從 React 到 Vue ，虛擬 DOM 為這兩個框架都帶來了跨平臺的能力（React-Native 和 Weex）。因...
摘要：的算法是基于的實現，并在些基礎上作了很多的調整和改進。此時和之間的是新增的，調用，把這些虛擬全部插進的后邊，可以認為新節點先遍歷完。 虛擬dom 為什么出現：瀏覽器解析一個html大致分為五步：創建DOM tree –> 創建Style Rules -> 構建Render tree -> 布局Layout –> 繪制Painting。每次對真實dom進行操作的時候，瀏覽器都會從構建...
摘要：閱讀源碼的時候，想了解虛擬結構的實現，發現在的地方。然而慢慢的人們發現，在我們的代碼中布滿了一系列操作的代碼。源碼解析系列源碼解析一準備工作源碼解析二函數源碼解析三對象源碼解析四方法源碼解析五鉤子源碼解析六模塊源碼解析七事件處理個人博客地址 前言 虛擬 DOM 結構概念隨著 react 的誕生而火起來，之后 vue2.0 也加入了虛擬 DOM 的概念。 閱讀 vue 源碼的時候，想了解...
摘要：圖在中應用三數據渲染過程數據綁定實現邏輯本節正式分析從到數據渲染到頁面的過程，在中定義了一個的構造函數。一、概述 vue已是目前國內前端web端三分天下之一，也是工作中主要技術棧之一。在日常使用中知其然也好奇著所以然，因此嘗試閱讀vue源碼并進行總結。本文旨在梳理初始化頁面時data中的數據是如何渲染到頁面上的。本文將帶著這個疑問一點點追究vue的思路。總體來說vue模版渲染大致流程如圖1所...
摘要：如果以上情況均不符合，則通過會得到一個，里面存放了一個為舊的，為對應序列的哈希表。從這個哈希表中可以找到是否有與一致的舊的節點，如果同時滿足，的同時會將這個真實移動到對應的真實的前面。 寫在前面 因為對Vue.js很感興趣，而且平時工作的技術棧也是Vue.js，這幾個月花了些時間研究學習了一下Vue.js源碼，并做了總結與輸出。文章的原地址：https://github.com/ans...
摘要：至此算是找到了源碼位置。至此進入過渡的部分完畢。在動畫結束后，調用了由組件生命周期傳入的方法，把這個元素的副本移出了文檔流。這篇并沒有去分析相關的內容，推薦一篇講非常不錯的文章，對構造函數如何來的感興趣的同學可以看這里 Vue transition源碼分析 本來打算自己造一個transition的輪子，所以決定先看看源碼，理清思路。Vue的transition組件提供了一系列鉤子函數，...
閱讀 1631·2021-10-27 14:13
閱讀 1868·2021-10-11 10:59
閱讀 3367·2021-09-24 10:26
閱讀 1925·2019-08-30 12:48
閱讀 3041·2019-08-30 12:46
閱讀 2033·2019-08-30 11:16
閱讀 1414·2019-08-30 10:48
閱讀 2740·2019-08-29 16:54
