為什么vue中的v-for key值不推薦使用index

qqlcbb 發(fā)布于2019-08-26 18:26 / 1205人閱讀

摘要：如果我們使用做在我們渲染到頁(yè)面的時(shí)候變成如果我們要在中間插入一條數(shù)組，，因?yàn)槲覀兪且褳橹担援?dāng)我們向數(shù)組中間插入一個(gè)新的數(shù)據(jù)，算法發(fā)現(xiàn)原本的三個(gè)的值沒(méi)改變，只是在中間加入了一個(gè)新的元素，原本的三個(gè)得到了復(fù)用這也就利用了虛擬在性能上的優(yōu)勢(shì)

首先我們舉一個(gè)例子
我們現(xiàn)在有這個(gè)數(shù)組
[

{
    id:201401,
    name:"chen"
},
{
    id:201402,
    name:"sun"
},          {
    id:201403,
    name:"wang"
},

]

如果我們使用index做key在我們渲染到頁(yè)面的時(shí)候變成

如果我們要在中間插入一條數(shù)組{id:201404,name:zhou}

當(dāng)我們?cè)谥虚g插入新元素的時(shí)候新元素的key值理所應(yīng)當(dāng)變成了index=1，key值也就變成了1 而原本index==1的li元素的index就變成了2，原本index==2的元素key值就變成了3 。這樣就導(dǎo)致虛擬dom的diff算法在做比較的時(shí)候發(fā)現(xiàn)，key值為1，2，3的元素和原來(lái)的key值為1，2，3的元素對(duì)比的時(shí)候發(fā)現(xiàn)二者不一樣，diff算法就會(huì)重新渲染這三個(gè)元素，原本key值為1，2的元素內(nèi)容沒(méi)有發(fā)生變化，但是因?yàn)閗ey值使用的是index所以還需要重新渲染，這就失去了虛擬dom在性能上的優(yōu)勢(shì)，所有我們要使用唯一鍵值來(lái)做標(biāo)記，例如id。

如果我們使用id做key在我們渲染到頁(yè)面的時(shí)候變成

如果我們要在中間插入一條數(shù)組{id:201404,name:zhou}

因?yàn)槲覀兪且裪d為key值，所以當(dāng)我們向數(shù)組中間插入一個(gè)新的數(shù)據(jù)，diff算法發(fā)現(xiàn)原本的三個(gè)

的key值沒(méi)改變，只是在中間加入了一個(gè)新的元素，原本的三個(gè)

得到了復(fù)用這也就利用了虛擬dom在性能上的優(yōu)勢(shì)

云服務(wù)器 GPU云服務(wù)器 oss中的key是什么 index html是什么域名 vue使用webrtc vue 中使用 webrtc

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/110192.html

相關(guān)文章

vue.js入門(mén)教程之基礎(chǔ)語(yǔ)法

摘要：與綁定數(shù)據(jù)綁定一個(gè)常見(jiàn)需求是操作元素的列表和它的內(nèi)聯(lián)樣式。兩者只能選其一對(duì)象語(yǔ)法我們可以傳給一個(gè)對(duì)象，以動(dòng)態(tài)地切換。注意不支持語(yǔ)法。相比之下，簡(jiǎn)單得多元素始終被編譯并保留，只是簡(jiǎn)單地基于切換。這意味著將分別重復(fù)運(yùn)行于每個(gè)循環(huán)中。 vue Class 與 Style 綁定數(shù)據(jù)綁定一個(gè)常見(jiàn)需求是操作元素的 class 列表和它的內(nèi)聯(lián)樣式。因?yàn)樗鼈兌际菍傩裕覀兛梢杂?v-bind 處理...

pumpkin9 2019-08-20 19:06 評(píng)論0 收藏0
vue note 01

摘要：數(shù)據(jù)綁定方式普通的文本可以使用語(yǔ)法雙大括號(hào)插在標(biāo)簽內(nèi)部表達(dá)式每個(gè)綁定都只能包含單個(gè)表達(dá)式只會(huì)添加一次當(dāng)再次修改時(shí)，不會(huì)觸發(fā)機(jī)制插入文本較少使用插入不推薦使用計(jì)算屬性基于它們的依賴(lài)進(jìn)行緩存的，只有在它的相關(guān)依賴(lài)發(fā)生改變時(shí)才會(huì)重新求值。數(shù)據(jù)綁定方式： 1.普通的文本可以使用 Mustache語(yǔ)法 (雙大括號(hào)) {{data}} 插在標(biāo)簽內(nèi)部eg:{{}} //js: data{ ...

leanote 2019-08-21 16:48 評(píng)論0 收藏0
Vue.js源碼（2）：初探List Rendering

摘要：最后舉兩個(gè)例子，回顧上面的內(nèi)容例一改變的是數(shù)組元素中屬性，由于創(chuàng)建的的指令，因此這里直接由指令更新對(duì)應(yīng)元素的內(nèi)容。下面例子來(lái)自官網(wǎng)，雖然看上去就比Hello World多了一個(gè)v-for，但是內(nèi)部多了好多的處理過(guò)程。但是這就是框架，只給你留下最美妙的東西，讓生活變得簡(jiǎn)單。 {{ todo.text }} ...

shiyang6017 2019-08-20 11:08 評(píng)論0 收藏0
Vue官方推薦的風(fēng)格指南

摘要：官方推薦的風(fēng)格指南個(gè)人筆記最近剛注意到官方多了一個(gè)風(fēng)格指南的推薦。中始終用組件命名因?yàn)楣俜酵扑]風(fēng)格命名，所以能用就用組件命名單詞應(yīng)該是完整的單詞完整單詞帶易讀性的好處，和書(shū)寫(xiě)麻煩的缺點(diǎn)。 Vue官方推薦的風(fēng)格指南-個(gè)人筆記最近剛注意到vue官方多了一個(gè)vue風(fēng)格指南的推薦。因?yàn)闃I(yè)務(wù)中一直用的vue，所以梳理學(xué)習(xí)一下，來(lái)增加自己代碼的規(guī)范性，效果不錯(cuò)也可以安利到團(tuán)隊(duì)。文檔沒(méi)有對(duì)JS...

null1145 2019-08-22 18:28 評(píng)論0 收藏0
vue里面的v-for列表循環(huán)

摘要：取到里面的偶數(shù)位的值在計(jì)算屬性不適用的情況下例如，在嵌套循環(huán)中你可以使用一個(gè)方法一段取值范圍的也可以取整數(shù)。列表渲染 v-for v-for可以把數(shù)據(jù)中的一個(gè)數(shù)組對(duì)應(yīng)為一組元素v-for 指令需要以 item in items 形式的特殊語(yǔ)法， items 是源數(shù)據(jù)數(shù)組并且 item 是數(shù)組元素迭代的別名。 {{item.text}} data:{ items:[ ...

verano 2019-08-20 19:05 評(píng)論0 收藏0