vue中v-for的key唯一性是什么

這篇文章主要介紹vue中v-for的key唯一性是什么，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

1. DOM Diff

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

以上是“vue中v-for的key唯一性是什么”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！