目錄1. DOM Diff2. 為同一層的相同類型的元素添加 key 屬性3. key 不能是 index 下標值1. DOM Diff

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

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

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

我們?nèi)搜垡谎劬涂梢钥闯龈淖兦昂透淖兒蟮牟煌帲桓虏煌幘涂梢粤恕５嬎銠C可一眼看不出來，它必須從頭一塊快地對比，直至找到不同之處進行更新。這個將改變前和改變后進行對比找不同的過程就是 DOM Diff，DOM Diff 中的 DOM 是虛擬 DOM，也就是 JavaScript 對象，一一比較找到不同之處后，就去局部更新真正的 DOM。

在比較的過程中， 虛擬 DOM 也會構(gòu)成一棵虛擬 DOM 樹，DOM Diff 的工作過程就是比較兩棵虛擬 DOM 樹上的對象節(jié)點，具體就是每一層和每一層的對應位置進行比較。正是因為計算機只會比較每一層對應位置的的兩個虛擬 DOM 元素，如果這兩棵樹中改變后的樹的某一層只是插入了一個節(jié)點，那樹的結(jié)構(gòu)是不變的，DOM Diff 在比較這一層的時候就會導致錯位比較了，如下圖所示：

因為這一層的虛擬 DOM 節(jié)點對于 Vue 和 React 來說除了 DOM 節(jié)點本身外是完全沒有任何不同的，所以 DOM Diff 在比較的時候就只能按照對應位置一一比較了。

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

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

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

此時，如果復用的 li 中有子元素的話，子元素依賴的數(shù)據(jù)沒有發(fā)生變化的話，就會繼續(xù)復用之前的子組件，這樣就會導致一個錯位，如下圖：

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

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

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

答案就是為同一層的相同節(jié)點類型的節(jié)點添加一個唯一標識的 key 值，這樣，在 DOM Diff 進行配對比較時，就會將 key 相同的兩個虛擬 DOM 進行比較，而不是僅僅按照對應位置進行比較了。

這樣一來就不會導致錯位比較了，就大大提高了比較的效率，解決了 bug 隱患。

3. key 不能是 index 下標值

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

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

那么為什么不能使用 index 下標呢？

其實就是因為 index 下標使用了跟沒使用了一樣，因為在添加和刪除時，某一個特定元素的 index 是會變的，比如 [1,2,3] 變成了 [1,3] 后，原來數(shù)據(jù) 3 對應的下標為2，刪除后數(shù)據(jù) 3 的下標變成了 1，這在 DOM Diff 的時候，會根據(jù) key 值相等的進行兩兩配對比較，這數(shù)據(jù)3對應的節(jié)點前后還是對應不上，因此，使用了 index 作為 key 跟沒設置 key 是一樣的效果。

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

因此：key 屬性值必須是獨一無二的且不會改變的

以上就是詳解vue中v-for的key唯一性的詳細內(nèi)容，更多關于vue中v-for的key唯一性的資料請關注好吧啦網(wǎng)其它相關文章！