結(jié)論：

更新DOM的時候會出現(xiàn)性能問題 會發(fā)生一些狀態(tài)bug React 中的 key 也是如此 如果已經(jīng)了解 為什么要用key，可以通過目錄直接跳到下一節(jié)。

為什么要用key？

Vue 和 React 都實現(xiàn)了一套虛擬DOM，使我們可以不直接操作DOM元素，只操作數(shù)據(jù)便可以重新渲染頁面。而隱藏在背后的原理便是其高效的Diff算法。

Vue 和 React 的虛擬DOM的Diff算法大致相同，其核心是基于兩個簡單的假設(shè)：

兩個相同的組件產(chǎn)生類似的DOM結(jié)構(gòu)，不同的組件產(chǎn)生不同的DOM結(jié)構(gòu)。 同一層級的一組節(jié)點，他們可以通過唯一的id進行區(qū)分。

基于以上這兩點假設(shè)，使得虛擬DOM的Diff算法的復(fù)雜度從O(n^3)降到了O(n)。

用一張圖簡單說明一下：

當(dāng)頁面的數(shù)據(jù)發(fā)生變化時，Diff算法只會比較同一層級的節(jié)點：

如果節(jié)點類型不同，直接干掉前面的節(jié)點，再創(chuàng)建并插入新的節(jié)點。

如果節(jié)點類型相同，則會重新設(shè)置該節(jié)點的屬性，從而實現(xiàn)節(jié)點的更新。

舉個栗子：

我們希望可以在B和C之間加一個F，Diff算法默認執(zhí)行起來是這樣的：

即把C更新成F，D更新成C，E更新成D，最后再插入E，這樣效率不高，且性能不夠好。

但是，如果使用key來給每個節(jié)點做一個唯一標(biāo)識，Diff算法就可以正確的識別此節(jié)點，找到正確的位置區(qū)插入新的節(jié)點。

總而言之，key的作用主要是為了高效的更新虛擬DOM 。另外vue中在使用相同標(biāo)簽名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區(qū)分它們，否則vue只會替換其內(nèi)部屬性而不會觸發(fā)過渡效果。

這里，也建議盡可能在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內(nèi)容非常簡單。

為什么不能用index作為key？

舉個栗子：

<template> <div v-for='(item, index) in list' :key='index' >{{item.name}}</div></template>

const list = [ { id: 1, name: 'Person1' }, { id: 2, name: 'Person2' }, { id: 3, name: 'Person3' }, { id:4, name:'Person4' }];

此時，刪除 “Person4” 是正常的，但是如果我刪除 “Person2” 就會出現(xiàn)問題。

刪除前

key id index name 0 1 0 Person1 1 2 1 Person2 2 3 2 Person3 3 4 3 Person4

刪除后

key id index name 0 1 0 Person1 1 3 1 Person3 2 4 2 Person4

這個時候，除了 Person1 之外，剩下的 Person3、Person4，因為被發(fā)現(xiàn)與相應(yīng) key 的綁定關(guān)系有變化，所以被重新渲染，這會影響性能。如果此時 list 的 item 是 select 的選項，其中 Person3 是選中的，這個時候 Person2 被刪除了，用 index 作為 key 就會變成是 Person4 選中的了，這就產(chǎn)生了bug。

如果使用唯一id作為key，刪除 Person2 后，剩下的元素因為與 key 的關(guān)系沒有發(fā)生變化，都不會被重新渲染，從而達到提升性能的目的。此時，list 的 item 作為 select 的選項，也不會出現(xiàn)上面所描述的bug。

到此這篇關(guān)于vue中使用v-for時為什么不能用index作為key的文章就介紹到這了,更多相關(guān)vue v-for不能用index作為key內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！