1. DOM Diff

要想真正了解 key 屬性的存在意義，還真得從 DOM Diff 說(shuō)起，并不需要深入了解 DOM Diff 的原理，而是僅僅需要知道 DOM Diff 的工作過(guò)程即可。

Vue 和 React 都采用了運(yùn)用虛擬 DOM 的方式減少瀏覽器不必要的渲染。由于 Vue 和 React 采用的都是 v = render( m ) 的方式渲染視圖的，當(dāng) model 數(shù)據(jù)發(fā)生變化時(shí)，視圖更新的方式就是重新 render DOM 元素。但是有時(shí)候我們只是改變了一個(gè)組件中的某一個(gè) div 中的數(shù)據(jù)，如果采用原生 render 的方式去更新視圖的話，那整個(gè)組件都要更新。豈不浪費(fèi)時(shí)間？

我們?nèi)粘Ｉ钪信龅竭@樣的情況可不會(huì)全部更新，就像一個(gè)拼圖拼好了，后來(lái)其中一小塊需要更換，我們找到拿一塊直接替換就好了，絕不會(huì)說(shuō)再?gòu)念^拼一次。Vue 和 React 的開(kāi)發(fā)者也是這樣想的，就去想方設(shè)法優(yōu)化。

我們?nèi)搜垡谎劬涂梢钥闯龈淖兦昂透淖兒蟮牟煌?，只更新不同之處就可以了。但?jì)算機(jī)可一眼看不出來(lái)，它必須從頭一塊快地對(duì)比，直至找到不同之處進(jìn)行更新。這個(gè)將改變前和改變后進(jìn)行對(duì)比找不同的過(guò)程就是 DOM Diff，DOM Diff 中的 DOM 是虛擬 DOM，也就是 JavaScript 對(duì)象，一一比較找到不同之處后，就去局部更新真正的 DOM。

在比較的過(guò)程中， 虛擬 DOM 也會(huì)構(gòu)成一棵虛擬 DOM 樹(shù)，DOM Diff 的工作過(guò)程就是比較兩棵虛擬 DOM 樹(shù)上的對(duì)象節(jié)點(diǎn)，具體就是每一層和每一層的對(duì)應(yīng)位置進(jìn)行比較。正是因?yàn)橛?jì)算機(jī)只會(huì)比較每一層對(duì)應(yīng)位置的的兩個(gè)虛擬 DOM 元素，如果這兩棵樹(shù)中改變后的樹(shù)的某一層只是插入了一個(gè)節(jié)點(diǎn)，那樹(shù)的結(jié)構(gòu)是不變的，DOM Diff 在比較這一層的時(shí)候就會(huì)導(dǎo)致錯(cuò)位比較了，如下圖所示：

因?yàn)檫@一層的虛擬 DOM 節(jié)點(diǎn)對(duì)于 Vue 和 React 來(lái)說(shuō)除了 DOM 節(jié)點(diǎn)本身外是完全沒(méi)有任何不同的，所以 DOM Diff 在比較的時(shí)候就只能按照對(duì)應(yīng)位置一一比較了。

一一比較后，如果節(jié)點(diǎn)類型相同，那么就會(huì)復(fù)用該節(jié)點(diǎn)，單單局部更新該節(jié)點(diǎn)內(nèi)不同的內(nèi)容處。就像上述圖中的，如果這是 ul 下的 li 的虛擬 DOM 節(jié)點(diǎn)的話，那一一比較后發(fā)現(xiàn)節(jié)點(diǎn)類型相同，就復(fù)用之前的節(jié)點(diǎn)，將節(jié)點(diǎn)里面的內(nèi)容進(jìn)行改變，也就是，將C更新成F，D更新成C，E更新成D，最后再插入E。

上述是插入節(jié)點(diǎn)的情況，帶來(lái)的后果就是效率上的降低，但如果是刪除節(jié)點(diǎn)的情況，那帶來(lái)的后果可就不僅僅是效率了。

假如是點(diǎn)擊一個(gè)按鈕刪除一個(gè) li 元素，那新舊虛擬 DOM 樹(shù)進(jìn)行比較的時(shí)候，還是根據(jù)樹(shù)中每一層的對(duì)應(yīng)位置一一比較，比如刪除后的 [1,2,3] 變成了 [1,3]，它就會(huì)將第一個(gè) li 和第二個(gè) li 相比較，發(fā)現(xiàn)元素類型沒(méi)有變化，就會(huì)復(fù)用第一個(gè) li，再遞歸對(duì)比 li 里面的，發(fā)現(xiàn)都沒(méi)變化就繼續(xù)復(fù)用。到了第二個(gè) li 之間比較的時(shí)候，發(fā)現(xiàn)也都是 li 元素，那就會(huì)復(fù)用之前的li，單單將 2 變成了 3。

此時(shí)，如果復(fù)用的 li 中有子元素的話，子元素依賴的數(shù)據(jù)沒(méi)有發(fā)生變化的話，就會(huì)繼續(xù)復(fù)用之前的子組件，這樣就會(huì)導(dǎo)致一個(gè)錯(cuò)位，如下圖：

2. 為同一層的相同類型的元素添加 key 屬性

在上述的 DOM Diff 算法中，比較的僅僅是兩棵樹(shù)同一層的對(duì)應(yīng)位置，在不同層之前的元素之間是不需要比較的，而且，當(dāng) DOM Diff 的過(guò)程中發(fā)現(xiàn)，改變后的虛擬 DOM 和之前的虛擬 DOM 類型不同的時(shí)候，就會(huì)將之前的卸載，重新再添加改變后的元素節(jié)點(diǎn)。因此，上述的問(wèn)題就出現(xiàn)在，兩棵樹(shù)中同一層的節(jié)點(diǎn)類型相同時(shí)，在該層添加或刪除時(shí)會(huì)降低效率或者帶來(lái) bug。

這就是我們?cè)?v-for 循環(huán)中生成同種類型的標(biāo)簽元素時(shí)的情況，如果不為該標(biāo)簽節(jié)點(diǎn)做點(diǎn)什么，就存在bug隱患，那么應(yīng)該做什么呢？

答案就是為同一層的相同節(jié)點(diǎn)類型的節(jié)點(diǎn)添加一個(gè)唯一標(biāo)識(shí)的 key 值，這樣，在 DOM Diff 進(jìn)行配對(duì)比較時(shí)，就會(huì)將 key 相同的兩個(gè)虛擬 DOM 進(jìn)行比較，而不是僅僅按照對(duì)應(yīng)位置進(jìn)行比較了。

這樣一來(lái)就不會(huì)導(dǎo)致錯(cuò)位比較了，就大大提高了比較的效率，解決了 bug 隱患。

3. key 不能是 index 下標(biāo)值

因?yàn)閿?shù)組或?qū)ο蟮?index 下標(biāo)值是唯一的，因此我們經(jīng)常使用 index 作為 key 屬性的值，有的人說(shuō)這樣是可以的，會(huì)帶來(lái)性能上的優(yōu)化什么的，但使用 index 下標(biāo)值是會(huì)有大大的 bug　隱患的。

這些 bug 會(huì)在你　v-for 循環(huán)的數(shù)組或?qū)ο蟀l(fā)生添加或刪除或順序改變時(shí)。

那么為什么不能使用 index 下標(biāo)呢？

其實(shí)就是因?yàn)?index 下標(biāo)使用了跟沒(méi)使用了一樣，因?yàn)樵谔砑雍蛣h除時(shí)，某一個(gè)特定元素的 index 是會(huì)變的，比如 [1,2,3] 變成了 [1,3] 后，原來(lái)數(shù)據(jù) 3 對(duì)應(yīng)的下標(biāo)為2，刪除后數(shù)據(jù) 3 的下標(biāo)變成了 1，這在 DOM Diff 的時(shí)候，會(huì)根據(jù) key 值相等的進(jìn)行兩兩配對(duì)比較，這數(shù)據(jù)3對(duì)應(yīng)的節(jié)點(diǎn)前后還是對(duì)應(yīng)不上，因此，使用了 index 作為 key 跟沒(méi)設(shè)置 key 是一樣的效果。

這就是為什么不要使用 index 作為 key 的原因。

因此：key 屬性值必須是獨(dú)一無(wú)二的且不會(huì)改變的

以上就是詳解vue中v-for的key唯一性的詳細(xì)內(nèi)容，更多關(guān)于vue中v-for的key唯一性的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論