您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“vue中使用v-for時為什么不可以使用index作為key的原因”的有關知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領大家學習一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
結(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算法大致相同,其核心是基于兩個簡單的假設:
兩個相同的組件產(chǎn)生類似的DOM結(jié)構(gòu),不同的組件產(chǎn)生不同的DOM結(jié)構(gòu)。
同一層級的一組節(jié)點,他們可以通過唯一的id進行區(qū)分。
基于以上這兩點假設,使得虛擬DOM的Diff算法的復雜度從O(n^3)降到了O(n)。
用一張圖簡單說明一下:
當頁面的數(shù)據(jù)發(fā)生變化時,Diff算法只會比較同一層級的節(jié)點:
如果節(jié)點類型不同,直接干掉前面的節(jié)點,再創(chuàng)建并插入新的節(jié)點。
如果節(jié)點類型相同,則會重新設置該節(jié)點的屬性,從而實現(xiàn)節(jié)點的更新。
舉個栗子:
我們希望可以在B和C之間加一個F,Diff算法默認執(zhí)行起來是這樣的:
即把C更新成F,D更新成C,E更新成D,最后再插入E,這樣效率不高,且性能不夠好。
但是,如果使用key來給每個節(jié)點做一個唯一標識,Diff算法就可以正確的識別此節(jié)點,找到正確的位置區(qū)插入新的節(jié)點。
總而言之,key的作用主要是為了高效的更新虛擬DOM 。另外vue中在使用相同標簽名元素的過渡切換時,也會使用到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)與相應 key 的綁定關系有變化,所以被重新渲染,這會影響性能。
如果此時 list 的 item 是 select 的選項,其中 Person3 是選中的,這個時候 Person2 被刪除了,用 index 作為 key 就會變成是 Person4 選中的了,這就產(chǎn)生了bug。
如果使用唯一id作為key,刪除 Person2 后,剩下的元素因為與 key 的關系沒有發(fā)生變化,都不會被重新渲染,從而達到提升性能的目的。此時,list 的 item 作為 select 的選項,也不會出現(xiàn)上面所描述的bug。
“vue中使用v-for時為什么不可以使用index作為key的原因”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。