前言
我的目標(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)銷(xiāo)是很大的继榆,比如有時(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ì)象扼鞋,一定要記咨暧恪)
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)的視圖猴鲫。
<img :src="$withBase('/other/two.png')" alt="mixureSecure">
具體分析
patch
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,稱(chēng)為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
<img :src="$withBase('/other/three.png')" alt="mixureSecure">
我們將它們?nèi)〕鰜?lái)并分別用s和e指針指向它們的頭child和尾child
<img :src="$withBase('/other/four.png')" alt="mixureSecure">
現(xiàn)在分別對(duì)oldS砸西、oldE叶眉、S、E兩兩做sameVnode比較芹枷,有四種比較方式衅疙,當(dāng)其中兩個(gè)能匹配上那么真實(shí)dom中的相應(yīng)節(jié)點(diǎn)會(huì)移到Vnode相應(yīng)的位置,這句話(huà)有點(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è)圖
<img :src="$withBase('/other/five.png')" alt="mixureSecure">
- 第一步
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)刪掉
<img :src="withBase('/other/serve.png')" alt="mixureSecure">
當(dāng)這些節(jié)點(diǎn)sameVnode成功后就會(huì)緊接著執(zhí)行patchVnode了,可以看一下上面的代碼
if (sameVnode(oldStartVnode, newStartVnode)) {
patchVnode(oldStartVnode, newStartVnode)
}
就這樣層層遞歸下去瘤旨,直到將oldVnode和Vnode中的所有子節(jié)點(diǎn)比對(duì)完梯啤。也將dom的所有補(bǔ)丁都打好啦。那么現(xiàn)在再回過(guò)去看updateChildren的代碼會(huì)不會(huì)容易很多呢存哲?