【總結】1135- 圖解虛擬 DOM 之 DIff 算法
原文: https://juejin.cn/post/7000266544181674014
1. 目錄
1. 相關知識點:2. 虛擬DOM(Virtual DOM)2.1. 什么是虛擬DOM2.2. 為什么要使用虛擬DOM2.3. 虛擬dom庫3. Diff算法4. snabbdom的核心4.1. init函數(shù)4.2. h函數(shù)4.3. patch函數(shù)(核心)4.4. patchVnode4.5. 題外話:diff算法簡介4.6. updateChildren(核中核:判斷子節(jié)點的差異)5. 最后
面試官:"你了解虛擬DOM(Virtual DOM)跟Diff算法嗎,請描述一下它們";
我:"額,...鵝,那個",完了??,突然智商不在線,沒組織好語言沒答好或者壓根就答不出來;
所以這次我總結一下相關的知識點,讓你可以有一個清晰的認知之余也會讓你在今后遇到這種情況可以「坦然自若,應付自如,游刃有余」:
2. 相關知識點:
虛擬DOM(Virtual DOM):
「什么是虛擬dom」
「為什么要使用虛擬dom」
虛擬DOM庫
DIFF算法:
init函數(shù)
h函數(shù)
「patch函數(shù)」
「patchVnode函數(shù)」
「updateChildren函數(shù)」
snabbDom源碼
3. 虛擬DOM(Virtual DOM)
3.1. 什么是虛擬DOM
一句話總結虛擬DOM就是一個用來描述真實DOM的「javaScript對象」,這樣說可能不夠形象,那我們來舉個??:分別用代碼來描述真實DOM以及虛擬DOM
真實DOM:
<ul class="list">
<li>ali>
<li>bli>
<li>cli>
ul>
對應的虛擬DOM:
let vnode = h('ul.list', [
h('li','a'),
h('li','b'),
h('li','c'),
])
console.log(vnode)
3.1.1 控制臺打印出來的「Vnode」:
3.1.2 h函數(shù)生成的虛擬DOM這個JS對象(Vnode)的源碼:
export interface VNodeData {
props?: Props
attrs?: Attrs
class?: Classes
style?: VNodeStyle
dataset?: Dataset
on?: On
hero?: Hero
attachData?: AttachData
hook?: Hooks
key?: Key
ns?: string // for SVGs
fn?: () => VNode // for thunks
args?: any[] // for thunks
[key: string]: any // for any other 3rd party module
}
export type Key = string | number
const interface VNode = {
sel: string | undefined, // 選擇器
data: VNodeData | undefined, // VNodeData上面定義的VNodeData
children: Arraystring> | undefined, //子節(jié)點,與text互斥
text: string | undefined, // 標簽中間的文本內(nèi)容
elm: Node | undefined, // 轉(zhuǎn)換而成的真實DOM
key: Key | undefined // 字符串或者數(shù)字
}
3.1.2 補充:
上面的h函數(shù)大家可能有點熟悉的感覺但是一時間也沒想起來,沒關系我來幫大伙回憶;開發(fā)中常見的現(xiàn)實場景,render函數(shù)渲染:
// 案例1 vue項目中的main.js的創(chuàng)建vue實例
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
//案例2 列表中使用render渲染
columns: [
{
title: "操作",
key: "action",
width: 150,
render: (h, params) => {
return h('section', [
h('Button', {
props: {
size: 'small'
},
style: {
marginRight: '5px',
marginBottom: '5px',
},
on: {
click: () => {
this.toEdit(params.row.uuid);
}
}
}, '編輯')
]);
}
}
]
3.2. 為什么要使用虛擬DOM
MVVM框架解決視圖和狀態(tài)同步問題
模板引擎可以簡化視圖操作,沒辦法跟蹤狀態(tài)
虛擬DOM跟蹤狀態(tài)變化
參考github上virtual-dom的動機描述
長按識別二維碼查看原文
https://github.com/Matt-Esch/virtual-dom? ? ? 虛擬DOM可以維護程序的狀態(tài),跟蹤上一次的狀態(tài)
通過比較前后兩次狀態(tài)差異更新真實DOM
跨平臺使用
瀏覽器平臺渲染DOM
服務端渲染SSR(Nuxt.js/Next.js),前端是vue向,后者是react向
原生應用(Weex/React Native)
小程序(mpvue/uni-app)等
真實DOM的屬性很多，創(chuàng)建DOM節(jié)點開銷很大
虛擬DOM只是普通JavaScript對象，描述屬性并不需要很多，創(chuàng)建開銷很小
「復雜視圖情況下提升渲染性能」(操作dom性能消耗大,減少操作dom的范圍可以提升性能)
「靈魂發(fā)問」:使用了虛擬DOM就一定會比直接渲染真實DOM快嗎?答案當然是否定的,且聽我說:
「舉例」:當一個節(jié)點變更時DOMA->DOMB
「舉例」:當DOM樹里面的某個子節(jié)點的內(nèi)容變更時:
總結:「復雜視圖情況下提升渲染性能」,因為虛擬DOM+Diff算法可以精準找到DOM樹變更的地方,減少DOM的操作(重排重繪)
3.3. 虛擬dom庫
Snabbdom
長按識別二維碼查看原文
https://github.com/snabbdom/snabbdom? ? ? Vue.js2.x內(nèi)部使用的虛擬DOM就是改造的Snabbdom
大約200SLOC(single line of code)
通過模塊可擴展
源碼使用TypeScript開發(fā)
最快的Virtual DOM之一
virtual-dom
長按識別二維碼查看原文
https://github.com/Matt-Esch/virtual-dom? ? ?
4. Diff算法
在看完上述的文章之后相信大家已經(jīng)對Diff算法有一個初步的概念,沒錯,Diff算法其實就是找出兩者之間的差異;
diff 算法首先要明確一個概念就是 Diff 的對象是虛擬DOM（virtual dom），更新真實 DOM 是 Diff 算法的結果。
下面我將會手撕snabbdom源碼核心部分為大家打開Diff的心,給點耐心,別關網(wǎng)頁,我知道你們都是這樣:
5. snabbdom的核心
init()設置模塊.創(chuàng)建patch()函數(shù)使用
h()函數(shù)創(chuàng)建JavaScript對象(Vnode)描述真實DOMpatch()比較新舊兩個Vnode把變化的內(nèi)容更新到
真實DOM樹
5.1. init函數(shù)
init函數(shù)時設置模塊,然后創(chuàng)建patch()函數(shù),我們先通過場景案例來有一個直觀的體現(xiàn):
import {init} from 'snabbdom/build/package/init.js'
import {h} from 'snabbdom/build/package/h.js'
// 1.導入模塊
import {styleModule} from "snabbdom/build/package/modules/style";
import {eventListenersModule} from "snabbdom/build/package/modules/eventListeners";
// 2.注冊模塊
const patch = init([
styleModule,
eventListenersModule
])
// 3.使用h()函數(shù)的第二個參數(shù)傳入模塊中使用的數(shù)據(jù)(對象)
let vnode = h('section', [
h('h1', {style: {backgroundColor: 'red'}}, 'Hello world'),
h('p', {on: {click: eventHandler}}, 'Hello P')
])
function eventHandler() {
alert('疼,別摸我')
}
const app = document.querySelector('#app')
patch(app,vnode)
當init使用了導入的模塊就能夠在h函數(shù)中用這些模塊提供的api去創(chuàng)建虛擬DOM(Vnode)對象;在上文中就使用了樣式模塊以及事件模塊讓創(chuàng)建的這個虛擬DOM具備樣式屬性以及事件屬性,最終通過patch函數(shù)對比兩個虛擬dom(會先把app轉(zhuǎn)換成虛擬dom),更新視圖;
我們再簡單看看init的源碼部分:
// src/package/init.ts
/* 第一參數(shù)就是各個模塊
第二參數(shù)就是DOMAPI,可以把DOM轉(zhuǎn)換成別的平臺的API,
也就是說支持跨平臺使用,當不傳的時候默認是htmlDOMApi,見下文
init是一個高階函數(shù),一個函數(shù)返回另外一個函數(shù),可以緩存modules,與domApi兩個參數(shù),
那么以后直接只傳oldValue跟newValue(vnode)就可以了*/
export function init (modules: Array>, domApi?: DOMAPI ) {
...
return function patch (oldVnode: VNode | Element, vnode: VNode): VNode {}
}
5.2. h函數(shù)
些地方也會用createElement來命名,它們是一樣的東西,都是創(chuàng)建虛擬DOM的,在上述文章中相信大伙已經(jīng)對h函數(shù)有一個初步的了解并且已經(jīng)聯(lián)想了使用場景,就不作場景案例介紹了,直接上源碼部分:
// h函數(shù)
export function h (sel: string): VNode
export function h (sel: string, data: VNodeData | null): VNode
export function h (sel: string, children: VNodeChildren): VNode
export function h (sel: string, data: VNodeData | null, children: VNodeChildren): VNode
export function h (sel: any, b?: any, c?: any): VNode {
var data: VNodeData = {}
var children: any
var text: any
var i: number
...
return vnode(sel, data, children, text, undefined) //最終返回一個vnode函數(shù)
};
// vnode函數(shù)
export function vnode (sel: string | undefined,
data: any | undefined,
children: Array | undefined,
text: string | undefined,
elm: Element | Text | undefined ): VNode {
const key = data === undefined ? undefined : data.key
return { sel, data, children, text, elm, key } //最終生成Vnode對象
}
「總結」:h函數(shù)先生成一個vnode函數(shù),然后vnode函數(shù)再生成一個Vnode對象(虛擬DOM對象)
5.2.1 補充:
在h函數(shù)源碼部分涉及一個函數(shù)重載的概念,簡單說明一下:
參數(shù)個數(shù)或參數(shù)類型不同的函數(shù)()
JavaScript中沒有重載的概念
TypeScript中有重載,不過重載的實現(xiàn)還是通過代碼調(diào)整參數(shù)
重載這個概念個參數(shù)相關,和返回值無關
實例1(函數(shù)重載-參數(shù)個數(shù))
function add(a:number,b:number){
console.log(a+b)
}
function add(a:number,b:number,c:number){
console.log(a+b+c)
}
add(1,2)
add(1,2,3)
實例2(函數(shù)重載-參數(shù)類型)
function add(a:number,b:number){
console.log(a+b)
}
function add(a:number,b:string){
console.log(a+b)
}
add(1,2)
add(1,'2')
5.3. patch函數(shù)(核心)
要是看完前面的鋪墊,看到這里你可能走神了,醒醒啊,這是核心啊,上高地了兄弟;
pactch(oldVnode,newVnode)
把新節(jié)點中變化的內(nèi)容渲染到真實DOM,最后返回新節(jié)點作為下一次處理的舊節(jié)點(核心)
對比新舊
VNode是否相同節(jié)點(節(jié)點的key和sel相同)如果不是相同節(jié)點,刪除之前的內(nèi)容,重新渲染
如果是相同節(jié)點,再判斷新的
VNode是否有text,如果有并且和oldVnode的text不同直接更新文本內(nèi)容(patchVnode)如果新的VNode有children,判斷子節(jié)點是否有變化
(updateChildren,最麻煩,最難實現(xiàn))
源碼:
return function patch(oldVnode: VNode | Element, vnode: VNode): VNode {
let i: number, elm: Node, parent: Node
const insertedVnodeQueue: VNodeQueue = []
// cbs.pre就是所有模塊的pre鉤子函數(shù)集合
for (i = 0; i < cbs.pre.length; ++i) cbs.pre[i]()
// isVnode函數(shù)時判斷oldVnode是否是一個虛擬DOM對象
if (!isVnode(oldVnode)) {
// 若不是即把Element轉(zhuǎn)換成一個虛擬DOM對象
oldVnode = emptyNodeAt(oldVnode)
}
// sameVnode函數(shù)用于判斷兩個虛擬DOM是否是相同的,源碼見補充1;
if (sameVnode(oldVnode, vnode)) {
// 相同則運行patchVnode對比兩個節(jié)點,關于patchVnode后面會重點說明(核心)
patchVnode(oldVnode, vnode, insertedVnodeQueue)
} else {
elm = oldVnode.elm! // !是ts的一種寫法代碼oldVnode.elm肯定有值
// parentNode就是獲取父元素
parent = api.parentNode(elm) as Node
// createElm是用于創(chuàng)建一個dom元素插入到vnode中(新的虛擬DOM)
createElm(vnode, insertedVnodeQueue)
if (parent !== null) {
// 把dom元素插入到父元素中,并且把舊的dom刪除
api.insertBefore(parent, vnode.elm!, api.nextSibling(elm))// 把新創(chuàng)建的元素放在舊的dom后面
removeVnodes(parent, [oldVnode], 0, 0)
}
}
for (i = 0; i < insertedVnodeQueue.length; ++i) {
insertedVnodeQueue[i].data!.hook!.insert!(insertedVnodeQueue[i])
}
for (i = 0; i < cbs.post.length; ++i) cbs.post[i]()
return vnode
}
5.3.1 補充1: sameVnode函數(shù)
function sameVnode(vnode1: VNode, vnode2: VNode): boolean { 通過key和sel選擇器判斷是否是相同節(jié)點
return vnode1.key === vnode2.key && vnode1.sel === vnode2.sel
}
5.4. patchVnode
第一階段觸發(fā)
prepatch函數(shù)以及update函數(shù)(都會觸發(fā)prepatch函數(shù),兩者不完全相同才會觸發(fā)update函數(shù))第二階段,真正對比新舊
vnode差異的地方第三階段,觸發(fā)
postpatch函數(shù)更新節(jié)點
源碼:
function patchVnode(oldVnode: VNode, vnode: VNode, insertedVnodeQueue: VNodeQueue) {
const hook = vnode.data?.hook
hook?.prepatch?.(oldVnode, vnode)
const elm = vnode.elm = oldVnode.elm!
const oldCh = oldVnode.children as VNode[]
const ch = vnode.children as VNode[]
if (oldVnode === vnode) return
if (vnode.data !== undefined) {
for (let i = 0; i < cbs.update.length; ++i) cbs.update[i](oldVnode, vnode)
vnode.data.hook?.update?.(oldVnode, vnode)
}
if (isUndef(vnode.text)) { // 新節(jié)點的text屬性是undefined
if (isDef(oldCh) && isDef(ch)) { // 當新舊節(jié)點都存在子節(jié)點
if (oldCh !== ch) updateChildren(elm, oldCh, ch, insertedVnodeQueue) //并且他們的子節(jié)點不相同執(zhí)行updateChildren函數(shù),后續(xù)會重點說明(核心)
} else if (isDef(ch)) { // 只有新節(jié)點有子節(jié)點
// 當舊節(jié)點有text屬性就會把''賦予給真實dom的text屬性
if (isDef(oldVnode.text)) api.setTextContent(elm, '')
// 并且把新節(jié)點的所有子節(jié)點插入到真實dom中
addVnodes(elm, null, ch, 0, ch.length - 1, insertedVnodeQueue)
} else if (isDef(oldCh)) { // 清除真實dom的所有子節(jié)點
removeVnodes(elm, oldCh, 0, oldCh.length - 1)
} else if (isDef(oldVnode.text)) { // 把''賦予給真實dom的text屬性
api.setTextContent(elm, '')
}
} else if (oldVnode.text !== vnode.text) { //若舊節(jié)點的text與新節(jié)點的text不相同
if (isDef(oldCh)) { // 若舊節(jié)點有子節(jié)點,就把所有的子節(jié)點刪除
removeVnodes(elm, oldCh, 0, oldCh.length - 1)
}
api.setTextContent(elm, vnode.text!) // 把新節(jié)點的text賦予給真實dom
}
hook?.postpatch?.(oldVnode, vnode) // 更新視圖
}
看得可能有點蒙蔽,下面再上一副思維導圖:
5.5. 題外話:diff算法簡介
「傳統(tǒng)diff算法」
虛擬DOM中的Diff算法
傳統(tǒng)算法查找兩顆樹每一個節(jié)點的差異會運行n1(dom1的節(jié)點數(shù))*n2(dom2的節(jié)點數(shù))次方去對比,找到差異的部分再去更新
「snabbdom的diff算法優(yōu)化」
Snbbdom根據(jù)DOM的特點對傳統(tǒng)的diff算法做了
優(yōu)化DOM操作時候很少會跨級別操作節(jié)點
只比較
同級別的節(jié)點
下面我們就會介紹updateChildren函數(shù)怎么去對比子節(jié)點的異同,也是Diff算法里面的一個核心以及難點;
5.6. updateChildren(核中核:判斷子節(jié)點的差異)
這個函數(shù)我分為三個部分,
部分1:聲明變量,部分2:同級別節(jié)點比較,部分3:循環(huán)結束的收尾工作(見下圖);
同級別節(jié)點比較的五種情況:oldStartVnode/newStartVnode(舊開始節(jié)點/新開始節(jié)點)相同oldEndVnode/newEndVnode(舊結束節(jié)點/新結束節(jié)點)相同oldStartVnode/newEndVnode(舊開始節(jié)點/新結束節(jié)點)相同oldEndVnode/newStartVnode(舊結束節(jié)點/新開始節(jié)點)相同特殊情況當1,2,3,4的情況都不符合的時候就會執(zhí)行,在oldVnodes里面尋找跟newStartVnode一樣的節(jié)點然后位移到oldStartVnode,若沒有找到在就oldStartVnode創(chuàng)建一個執(zhí)行過程是一個循環(huán),在每次循環(huán)里,只要執(zhí)行了上述的情況的五種之一就會結束一次循環(huán)
循環(huán)結束的收尾工作:直到oldStartIdx>oldEndIdx || newStartIdx>newEndIdx(代表舊節(jié)點或者新節(jié)點已經(jīng)遍歷完)
為了更加直觀的了解,我們再來看看同級別節(jié)點比較的五種情況的實現(xiàn)細節(jié):
5.6.1 新開始節(jié)點和舊開始節(jié)點(情況1)
若
情況1符合:(從新舊節(jié)點的開始節(jié)點開始對比,oldCh[oldStartIdx]和newCh[newStartIdx]進行sameVnode(key和sel相同)判斷是否相同節(jié)點)則執(zhí)行
patchVnode找出兩者之間的差異,更新圖;如沒有差異則什么都不操作,結束一次循環(huán)oldStartIdx++/newStartIdx++
5.6.2 新結束節(jié)點和舊結束節(jié)點(情況2)
若
情況1不符合就判斷情況2,若符合:(從新舊節(jié)點的結束節(jié)點開始對比,oldCh[oldEndIdx]和newCh[newEndIdx]對比,執(zhí)行sameVnode(key和sel相同)判斷是否相同節(jié)點)執(zhí)行
patchVnode找出兩者之間的差異,更新視圖,;如沒有差異則什么都不操作,結束一次循環(huán)oldEndIdx--/newEndIdx--
5.6.3 舊開始節(jié)點/新結束節(jié)點(情況3)
若
情況1,2都不符合,就會嘗試情況3:(舊節(jié)點的開始節(jié)點與新節(jié)點的結束節(jié)點開始對比,oldCh[oldStartIdx]和newCh[newEndIdx]對比,執(zhí)行sameVnode(key和sel相同)判斷是否相同節(jié)點)執(zhí)行
patchVnode找出兩者之間的差異,更新視圖,如沒有差異則什么都不操作,結束一次循環(huán)oldCh[oldStartIdx]對應的真實dom位移到oldCh[oldEndIdx]對應的真實dom后oldStartIdx++/newEndIdx--;
5.6.4 舊結束節(jié)點/新開始節(jié)點(情況4)
若
情況1,2,3都不符合,就會嘗試情況4:(舊節(jié)點的結束節(jié)點與新節(jié)點的開始節(jié)點開始對比,oldCh[oldEndIdx]和newCh[newStartIdx]對比,執(zhí)行sameVnode(key和sel相同)判斷是否相同節(jié)點)執(zhí)行
patchVnode找出兩者之間的差異,更新視圖,如沒有差異則什么都不操作,結束一次循環(huán)oldCh[oldEndIdx]對應的真實dom位移到oldCh[oldStartIdx]對應的真實dom前oldEndIdx--/newStartIdx++;
5.6.5 新開始節(jié)點/舊節(jié)點數(shù)組中尋找節(jié)點(情況5)
從舊節(jié)點里面尋找,若尋找到與
newCh[newStartIdx]相同的節(jié)點(且叫對應節(jié)點[1]),執(zhí)行patchVnode找出兩者之間的差異,更新視圖,如沒有差異則什么都不操作,結束一次循環(huán)對應節(jié)點[1]對應的真實dom位移到oldCh[oldStartIdx]對應的真實dom前
若沒有尋找到相同的節(jié)點,則創(chuàng)建一個與newCh[newStartIdx]節(jié)點對應的真實dom插入到oldCh[oldStartIdx]對應的真實dom前newStartIdx++
下面我們再介紹一下結束循環(huán)的收尾工作(oldStartIdx>oldEndIdx || newStartIdx>newEndIdx):
新節(jié)點的所有子節(jié)點先遍歷完(newStartIdx>newEndIdx),循環(huán)結束新節(jié)點的所有子節(jié)點遍歷結束就是把沒有對應相同節(jié)點的子節(jié)點刪除
舊節(jié)點的所有子節(jié)點先遍歷完(oldStartIdx>oldEndIdx),循環(huán)結束舊節(jié)點的所有子節(jié)點遍歷結束就是在多出來的子節(jié)點插入到舊節(jié)點結束節(jié)點前;(源碼:newCh[newEndIdx + 1].elm),就是對應的舊結束節(jié)點的真實dom,newEndIdx+1是因為在匹配到相同的節(jié)點需要-1,所以需要加回來就是結束節(jié)點
最后附上源碼:
function updateChildren(parentElm, oldCh, newCh, insertedVnodeQueue) {
let oldStartIdx = 0; // 舊節(jié)點開始節(jié)點索引
let newStartIdx = 0; // 新節(jié)點開始節(jié)點索引
let oldEndIdx = oldCh.length - 1; // 舊節(jié)點結束節(jié)點索引
let oldStartVnode = oldCh[0]; // 舊節(jié)點開始節(jié)點
let oldEndVnode = oldCh[oldEndIdx]; // 舊節(jié)點結束節(jié)點
let newEndIdx = newCh.length - 1; // 新節(jié)點結束節(jié)點索引
let newStartVnode = newCh[0]; // 新節(jié)點開始節(jié)點
let newEndVnode = newCh[newEndIdx]; // 新節(jié)點結束節(jié)點
let oldKeyToIdx; // 節(jié)點移動相關
let idxInOld; // 節(jié)點移動相關
let elmToMove; // 節(jié)點移動相關
let before;
// 同級別節(jié)點比較
while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
if (oldStartVnode == null) {
oldStartVnode = oldCh[++oldStartIdx]; // Vnode might have been moved left
}
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)) { // 判斷情況1
patchVnode(oldStartVnode, newStartVnode, insertedVnodeQueue);
oldStartVnode = oldCh[++oldStartIdx];
newStartVnode = newCh[++newStartIdx];
}
else if (sameVnode(oldEndVnode, newEndVnode)) { // 情況2
patchVnode(oldEndVnode, newEndVnode, insertedVnodeQueue);
oldEndVnode = oldCh[--oldEndIdx];
newEndVnode = newCh[--newEndIdx];
}
else if (sameVnode(oldStartVnode, newEndVnode)) { // Vnode moved right情況3
patchVnode(oldStartVnode, newEndVnode, insertedVnodeQueue);
api.insertBefore(parentElm, oldStartVnode.elm, api.nextSibling(oldEndVnode.elm));
oldStartVnode = oldCh[++oldStartIdx];
newEndVnode = newCh[--newEndIdx];
}
else if (sameVnode(oldEndVnode, newStartVnode)) { // Vnode moved left情況4
patchVnode(oldEndVnode, newStartVnode, insertedVnodeQueue);
api.insertBefore(parentElm, oldEndVnode.elm, oldStartVnode.elm);
oldEndVnode = oldCh[--oldEndIdx];
newStartVnode = newCh[++newStartIdx];
}
else { // 情況5
if (oldKeyToIdx === undefined) {
oldKeyToIdx = createKeyToOldIdx(oldCh, oldStartIdx, oldEndIdx);
}
idxInOld = oldKeyToIdx[newStartVnode.key];
if (isUndef(idxInOld)) { // New element // 創(chuàng)建新的節(jié)點在舊節(jié)點的新節(jié)點前
api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
}
else {
elmToMove = oldCh[idxInOld];
if (elmToMove.sel !== newStartVnode.sel) { // 創(chuàng)建新的節(jié)點在舊節(jié)點的新節(jié)點前
api.insertBefore(parentElm, createElm(newStartVnode, insertedVnodeQueue), oldStartVnode.elm);
}
else {
// 在舊節(jié)點數(shù)組中找到相同的節(jié)點就對比差異更新視圖,然后移動位置
patchVnode(elmToMove, newStartVnode, insertedVnodeQueue);
oldCh[idxInOld] = undefined;
api.insertBefore(parentElm, elmToMove.elm, oldStartVnode.elm);
}
}
newStartVnode = newCh[++newStartIdx];
}
}
// 循環(huán)結束的收尾工作
if (oldStartIdx <= oldEndIdx || newStartIdx <= newEndIdx) {
if (oldStartIdx > oldEndIdx) {
// newCh[newEndIdx + 1].elm就是舊節(jié)點數(shù)組中的結束節(jié)點對應的dom元素
// newEndIdx+1是因為在之前成功匹配了newEndIdx需要-1
// newCh[newEndIdx + 1].elm,因為已經(jīng)匹配過有相同的節(jié)點了,它就是等于舊節(jié)點數(shù)組中的結束節(jié)點對應的dom元素(oldCh[oldEndIdx + 1].elm)
before = newCh[newEndIdx + 1] == null ? null : newCh[newEndIdx + 1].elm;
// 把新節(jié)點數(shù)組中多出來的節(jié)點插入到before前
addVnodes(parentElm, before, newCh, newStartIdx, newEndIdx, insertedVnodeQueue);
}
else {
// 這里就是把沒有匹配到相同節(jié)點的節(jié)點刪除掉
removeVnodes(parentElm, oldCh, oldStartIdx, oldEndIdx);
}
}
}
5.6.6 key的作用
Diff操作可以
更加快速;Diff操作可以更加準確;
(避免渲染錯誤)不推薦使用索引作為key
以下我們看看這些作用的實例:
5.6.6 Diff操作可以更加準確;(避免渲染錯誤):
實例:a,b,c三個dom元素中的b,c間插入一個z元素
沒有設置key
當設置了key:
5.6.6 Diff操作可以更加準確;(避免渲染錯誤)
實例:a,b,c三個dom元素,修改了a元素的某個屬性再去在a元素前新增一個z元素
沒有設置key:
因為沒有設置key,默認都是undefined,所以節(jié)點都是相同的,更新了text的內(nèi)容但還是沿用了之前的dom,所以實際上a->z(a原本打勾的狀態(tài)保留了,只改變了text),b->a,c->b,d->c,遍歷完畢發(fā)現(xiàn)還要增加一個dom,在最后新增一個text為d的dom元素
設置了key:
當設置了key,a,b,c,d都有對應的key,a->a,b->b,c->c,d->d,內(nèi)容相同無需更新,遍歷結束,新增一個text為z的dom元素
5.6.6 不推薦使用索引作為key:
設置索引為key:
這明顯效率不高,我們只希望找出不同的節(jié)點更新,而使用索引作為key會增加運算時間,我們可以把key設置為與節(jié)點text為一致就可以解決這個問題:
6. 關注我
回復“加群”與大佬們一起交流學習~
點擊“閱讀原文”查看 120+ 篇原創(chuàng)文章