本篇內(nèi)容介紹了“vue中使用v-for時(shí)為什么不可以使用index作為key的原因”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

創(chuàng)新互聯(lián)是專業(yè)的扶溝網(wǎng)站建設(shè)公司，扶溝接單;提供成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行扶溝網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

結(jié)論：

• 更新DOM的時(shí)候會(huì)出現(xiàn)性能問題

• 會(huì)發(fā)生一些狀態(tài)bug

• React 中的 key 也是如此

• 如果已經(jīng)了解 為什么要用key，可以通過目錄直接跳到下一節(jié)。

為什么要用key？

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

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

1. 兩個(gè)相同的組件產(chǎn)生類似的DOM結(jié)構(gòu)，不同的組件產(chǎn)生不同的DOM結(jié)構(gòu)。

2. 同一層級(jí)的一組節(jié)點(diǎn)，他們可以通過唯一的id進(jìn)行區(qū)分。

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

用一張圖簡單說明一下：

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

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

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

舉個(gè)栗子：

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

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

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

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

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

為什么不能用index作為key？

舉個(gè)栗子：

<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"
  }
];

此時(shí)，刪除 “Person4” 是正常的，但是如果我刪除 “Person2” 就會(huì)出現(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

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

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

“vue中使用v-for時(shí)為什么不可以使用index作為key的原因”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

新聞標(biāo)題：vue中使用v-for時(shí)為什么不可以使用index作為key的原因-創(chuàng)新互聯(lián)
網(wǎng)站URL：http://aaarwkj.com/article10/cdhcdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、小程序開發(fā)、軟件開發(fā)、電子商務(wù)、云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)