您好,登錄后才能下訂單哦!
這篇文章主要介紹了vue.js中的diff算法怎么用,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
前言
我的目標(biāo)是寫(xiě)一個(gè)非常詳細(xì)的關(guān)于diff的干貨,所以本文有點(diǎn)長(zhǎng)。也會(huì)用到大量的圖片以及代碼舉例,目的讓看這篇文章的朋友一定弄明白diff的邊邊角角。
先來(lái)了解幾個(gè)點(diǎn)...
1. 當(dāng)數(shù)據(jù)發(fā)生變化時(shí),vue是怎么更新節(jié)點(diǎn)的?
要知道渲染真實(shí)DOM的開(kāi)銷是很大的,比如有時(shí)候我們修改了某個(gè)數(shù)據(jù),如果直接渲染到真實(shí)dom上會(huì)引起整個(gè)dom樹(shù)的重繪和重排,有沒(méi)有可能我們只更新我們修改的那一小塊dom而不要更新整個(gè)dom呢?diff算法能夠幫助我們。
我們先根據(jù)真實(shí)DOM生成一顆virtual DOM,當(dāng)virtual DOM某個(gè)節(jié)點(diǎn)的數(shù)據(jù)改變后會(huì)生成一個(gè)新的Vnode,然后Vnode和oldVnode作對(duì)比,發(fā)現(xiàn)有不一樣的地方就直接修改在真實(shí)的DOM上,然后使oldVnode的值為Vnode。
diff的過(guò)程就是調(diào)用名為patch的函數(shù),比較新舊節(jié)點(diǎn),一邊比較一邊給真實(shí)的DOM打補(bǔ)丁。
2. virtual DOM和真實(shí)DOM的區(qū)別?
virtual DOM是將真實(shí)的DOM的數(shù)據(jù)抽取出來(lái),以對(duì)象的形式模擬樹(shù)形結(jié)構(gòu)。比如dom是這樣的:
<div> <p>123</p> </div>
對(duì)應(yīng)的virtual DOM(偽代碼):
var Vnode = { tag: 'div', children: [ { tag: 'p', text: '123' } ] };
(溫馨提示:VNode和oldVNode都是對(duì)象,一定要記?。?/p>
3. diff的比較方式?
在采取diff算法比較新舊節(jié)點(diǎn)的時(shí)候,比較只會(huì)在同層級(jí)進(jìn)行, 不會(huì)跨層級(jí)比較。
<div> <p>123</p> </div> <div> <span>456</span> </div>
上面的代碼會(huì)分別比較同一層的兩個(gè)div以及第二層的p和span,但是不會(huì)拿div和span作比較。在別處看到的一張很形象的圖:
diff流程圖
當(dāng)數(shù)據(jù)發(fā)生改變時(shí),set方法會(huì)讓調(diào)用Dep.notify通知所有訂閱者Watcher,訂閱者就會(huì)調(diào)用patch給真實(shí)的DOM打補(bǔ)丁,更新相應(yīng)的視圖。
具體分析
patch
來(lái)看看patch是怎么打補(bǔ)丁的(代碼只保留核心部分)
function patch (oldVnode, vnode) { // some code if (sameVnode(oldVnode, vnode)) { patchVnode(oldVnode, vnode) } else { const oEl = oldVnode.el // 當(dāng)前oldVnode對(duì)應(yīng)的真實(shí)元素節(jié)點(diǎn) let parentEle = api.parentNode(oEl) // 父元素 createEle(vnode) // 根據(jù)Vnode生成新元素 if (parentEle !== null) { api.insertBefore(parentEle, vnode.el, api.nextSibling(oEl)) // 將新元素添加進(jìn)父元素 api.removeChild(parentEle, oldVnode.el) // 移除以前的舊元素節(jié)點(diǎn) oldVnode = null } } // some code return vnode }
patch函數(shù)接收兩個(gè)參數(shù)oldVnode和Vnode分別代表新的節(jié)點(diǎn)和之前的舊節(jié)點(diǎn)
判斷兩節(jié)點(diǎn)是否值得比較,值得比較則執(zhí)行patchVnode
function sameVnode (a, b) { return ( a.key === b.key && // key值 a.tag === b.tag && // 標(biāo)簽名 a.isComment === b.isComment && // 是否為注釋節(jié)點(diǎn) // 是否都定義了data,data包含一些具體信息,例如onclick , style isDef(a.data) === isDef(b.data) && sameInputType(a, b) // 當(dāng)標(biāo)簽是<input>的時(shí)候,type必須相同 ) }
不值得比較則用Vnode替換oldVnode
如果兩個(gè)節(jié)點(diǎn)都是一樣的,那么就深入檢查他們的子節(jié)點(diǎn)。如果兩個(gè)節(jié)點(diǎn)不一樣那就說(shuō)明Vnode完全被改變了,就可以直接替換oldVnode。
雖然這兩個(gè)節(jié)點(diǎn)不一樣但是他們的子節(jié)點(diǎn)一樣怎么辦?別忘了,diff可是逐層比較的,如果第一層不一樣那么就不會(huì)繼續(xù)深入比較第二層了。(我在想這算是一個(gè)缺點(diǎn)嗎?相同子節(jié)點(diǎn)不能重復(fù)利用了...)
patchVnode
當(dāng)我們確定兩個(gè)節(jié)點(diǎn)值得比較之后我們會(huì)對(duì)兩個(gè)節(jié)點(diǎn)指定patchVnode方法。那么這個(gè)方法做了什么呢?
patchVnode (oldVnode, vnode) { const el = vnode.el = oldVnode.el let i, oldCh = oldVnode.children, ch = vnode.children if (oldVnode === vnode) return if (oldVnode.text !== null && vnode.text !== null && oldVnode.text !== vnode.text) { api.setTextContent(el, vnode.text) }else { updateEle(el, vnode, oldVnode) if (oldCh && ch && oldCh !== ch) { updateChildren(el, oldCh, ch) }else if (ch){ createEle(vnode) //create el's children dom }else if (oldCh){ api.removeChildren(el) } } }
這個(gè)函數(shù)做了以下事情:
找到對(duì)應(yīng)的真實(shí)dom,稱為el
判斷Vnode和oldVnode是否指向同一個(gè)對(duì)象,如果是,那么直接return
如果他們都有文本節(jié)點(diǎn)并且不相等,那么將el的文本節(jié)點(diǎn)設(shè)置為Vnode的文本節(jié)點(diǎn)。
如果oldVnode有子節(jié)點(diǎn)而Vnode沒(méi)有,則刪除el的子節(jié)點(diǎn)
如果oldVnode沒(méi)有子節(jié)點(diǎn)而Vnode有,則將Vnode的子節(jié)點(diǎn)真實(shí)化之后添加到el
如果兩者都有子節(jié)點(diǎn),則執(zhí)行updateChildren函數(shù)比較子節(jié)點(diǎn),這一步很重要
其他幾個(gè)點(diǎn)都很好理解,我們?cè)敿?xì)來(lái)講一下updateChildren
updateChildren
代碼量很大,不方便一行一行的講解,所以下面結(jié)合一些示例圖來(lái)描述一下。
updateChildren (parentElm, oldCh, newCh) { let oldStartIdx = 0, 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 let idxInOld let elmToMove let before while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) { if (oldStartVnode == null) { // 對(duì)于vnode.key的比較,會(huì)把oldVnode = null oldStartVnode = oldCh[++oldStartIdx] }else if (oldEndVnode == null) { oldEndVnode = oldCh[--oldEndIdx] }else if (newStartVnode == null) { newStartVnode = newCh[++newStartIdx] }else if (newEndVnode == null) { newEndVnode = newCh[--newEndIdx] }else if (sameVnode(oldStartVnode, newStartVnode)) { patchVnode(oldStartVnode, newStartVnode) oldStartVnode = oldCh[++oldStartIdx] newStartVnode = newCh[++newStartIdx] }else if (sameVnode(oldEndVnode, newEndVnode)) { patchVnode(oldEndVnode, newEndVnode) oldEndVnode = oldCh[--oldEndIdx] newEndVnode = newCh[--newEndIdx] }else if (sameVnode(oldStartVnode, newEndVnode)) { patchVnode(oldStartVnode, newEndVnode) api.insertBefore(parentElm, oldStartVnode.el, api.nextSibling(oldEndVnode.el)) oldStartVnode = oldCh[++oldStartIdx] newEndVnode = newCh[--newEndIdx] }else if (sameVnode(oldEndVnode, newStartVnode)) { patchVnode(oldEndVnode, newStartVnode) api.insertBefore(parentElm, oldEndVnode.el, oldStartVnode.el) oldEndVnode = oldCh[--oldEndIdx] newStartVnode = newCh[++newStartIdx] }else { // 使用key時(shí)的比較 if (oldKeyToIdx === undefined) { oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx) // 有key生成index表 } idxInOld = oldKeyToIdx[newStartVnode.key] if (!idxInOld) { api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el) newStartVnode = newCh[++newStartIdx] } else { elmToMove = oldCh[idxInOld] if (elmToMove.sel !== newStartVnode.sel) { api.insertBefore(parentElm, createEle(newStartVnode).el, oldStartVnode.el) }else { patchVnode(elmToMove, newStartVnode) oldCh[idxInOld] = null api.insertBefore(parentElm, elmToMove.el, oldStartVnode.el) } newStartVnode = newCh[++newStartIdx] } } } if (oldStartIdx > oldEndIdx) { before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].el addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx) }else if (newStartIdx > newEndIdx) { removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx) } }
先說(shuō)一下這個(gè)函數(shù)做了什么
將Vnode的子節(jié)點(diǎn)Vch和oldVnode的子節(jié)點(diǎn)oldCh提取出來(lái)
oldCh和vCh各有兩個(gè)頭尾的變量StartIdx和EndIdx,它們的2個(gè)變量相互比較,一共有4種比較方式。如果4種比較都沒(méi)匹配,如果設(shè)置了key,就會(huì)用key進(jìn)行比較,在比較的過(guò)程中,變量會(huì)往中間靠,一旦StartIdx>EndIdx表明oldCh和vCh至少有一個(gè)已經(jīng)遍歷完了,就會(huì)結(jié)束比較。
圖解updateChildren
終于來(lái)到了這一部分,上面的總結(jié)相信很多人也看得一臉懵逼,下面我們好好說(shuō)道說(shuō)道。(這都是我自己畫(huà)的,求推薦好用的畫(huà)圖工具...)
粉紅色的部分為oldCh和vCh
我們將它們?nèi)〕鰜?lái)并分別用s和e指針指向它們的頭child和尾child
現(xiàn)在分別對(duì)oldS、oldE、S、E兩兩做sameVnode比較,有四種比較方式,當(dāng)其中兩個(gè)能匹配上那么真實(shí)dom中的相應(yīng)節(jié)點(diǎn)會(huì)移到Vnode相應(yīng)的位置,這句話有點(diǎn)繞,打個(gè)比方
如果是oldS和E匹配上了,那么真實(shí)dom中的第一個(gè)節(jié)點(diǎn)會(huì)移到最后
如果是oldE和S匹配上了,那么真實(shí)dom中的最后一個(gè)節(jié)點(diǎn)會(huì)移到最前,匹配上的兩個(gè)指針向中間移動(dòng)
如果四種匹配沒(méi)有一對(duì)是成功的,那么遍歷oldChild,S挨個(gè)和他們匹配,匹配成功就在真實(shí)dom中將成功的節(jié)點(diǎn)移到最前面,如果依舊沒(méi)有成功的,那么將S對(duì)應(yīng)的節(jié)點(diǎn)插入到dom中對(duì)應(yīng)的oldS位置,oldS和S指針向中間移動(dòng)。
再配個(gè)圖
第一步
oldS = a, oldE = d; S = a, E = b;
oldS和S匹配,則將dom中的a節(jié)點(diǎn)放到第一個(gè),已經(jīng)是第一個(gè)了就不管了,此時(shí)dom的位置為:a b d
第二步
oldS = b, oldE = d; S = c, E = b;
oldS和E匹配,就將原本的b節(jié)點(diǎn)移動(dòng)到最后,因?yàn)镋是最后一個(gè)節(jié)點(diǎn),他們位置要一致,這就是上面說(shuō)的:當(dāng)其中兩個(gè)能匹配上那么真實(shí)dom中的相應(yīng)節(jié)點(diǎn)會(huì)移到Vnode相應(yīng)的位置,此時(shí)dom的位置為:a d b
第三步
oldS = d, oldE = d; S = c, E = d;
oldE和E匹配,位置不變此時(shí)dom的位置為:a d b
第四步
oldS++; oldE--; oldS > oldE;
遍歷結(jié)束,說(shuō)明oldCh先遍歷完。就將剩余的vCh節(jié)點(diǎn)根據(jù)自己的的index插入到真實(shí)dom中去,此時(shí)dom位置為:a c d b
一次模擬完成。
這個(gè)匹配過(guò)程的結(jié)束有兩個(gè)條件:
oldS > oldE表示oldCh先遍歷完,那么就將多余的vCh根據(jù)index添加到dom中去(如上圖)
S > E表示vCh先遍歷完,那么就在真實(shí)dom中將區(qū)間為[oldS, oldE]的多余節(jié)點(diǎn)刪掉
下面再舉一個(gè)例子,可以像上面那樣自己試著模擬一下
當(dāng)這些節(jié)點(diǎn)sameVnode成功后就會(huì)緊接著執(zhí)行patchVnode了,可以看一下上面的代碼
if (sameVnode(oldStartVnode, newStartVnode)) { patchVnode(oldStartVnode, newStartVnode) }
總結(jié)
以上為diff算法的全部過(guò)程,放上一張文章開(kāi)始就發(fā)過(guò)的總結(jié)圖,可以試試看著這張圖回憶一下diff的過(guò)程。
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“vue.js中的diff算法怎么用”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。