Vue 2.0 v-for 響應(yīng)式key, index及item.id參數(shù)對(duì)v-bind:key值造成差異研究

在github上閱覽README.md以獲得最佳閱讀體驗(yàn)，點(diǎn)這里

v-for響應(yīng)式key, index及item.id參數(shù)對(duì)v-bind:key值造成差異研究

實(shí)驗(yàn)背景

通常情況下，我們渲染一個(gè)li列表，采用v-for指令進(jìn)行渲染，我們需要給渲染的每一項(xiàng)元素綁定一個(gè)key值，其實(shí)綁定該key值是可選的，但會(huì)引起警告。使用v-for參數(shù)的過(guò)程中，由于v-for提供三個(gè)參數(shù)，分別是: value, key, index。對(duì)其哪一個(gè)作為元素綁定key值更能得到我們想要的響應(yīng)式渲染作出實(shí)驗(yàn)。

實(shí)驗(yàn)準(zhǔn)備

我們準(zhǔn)備第三個(gè)可以作為綁定key值的變量，分別是:

• 渲染item自帶屬性id
• v-for提供的key
• v-for提供的index

我們制定一個(gè)參照表格

---

li綁定key值類型idindexkey

實(shí)驗(yàn)一	選取	x	x
實(shí)驗(yàn)二	x	選取	x
實(shí)驗(yàn)三	x	x	選取

---

實(shí)驗(yàn)一

• li綁定key值為自帶屬性id
• 分別控制兩個(gè)變量：改變id值，對(duì)li進(jìn)行排序

實(shí)驗(yàn)vue.js代碼

// items data items: [{id: 2,},{id: 1,},{id: 3,},{id: 4,}, ] <!-- dom constructor --> <template><div class="content"><ul><li class="animate">對(duì)照組</li><li v-for="(item, key, index) in items" class="animate" v-bind:key="item.id">{{item.id}}</li><!-- 當(dāng)前綁定值為item.id --></ul></div></div> </template>

首先使用了item.id作為綁定的key值，我們來(lái)看下效果：
渲染效果demo

改變第一個(gè)元素的id值，第一個(gè)li元素重新渲染，其余三個(gè)li元素與對(duì)照組速度始終保持一致，沒(méi)有變化，說(shuō)明li元素單獨(dú)渲染

為了驗(yàn)證1.觀點(diǎn)，我們對(duì)實(shí)驗(yàn)組按照升序進(jìn)行排列，查看DOM結(jié)構(gòu)，當(dāng)改變第一個(gè)元素位置時(shí)，第一個(gè)li元素重新渲染，其余三個(gè)li元素不重新渲染且與對(duì)照組速度始終保持一致，說(shuō)明第一個(gè)li元素單獨(dú)渲染，驗(yàn)證1.結(jié)論

---

實(shí)驗(yàn)二

• li綁定key值為 v-for提供的index參數(shù)
• 分別控制兩個(gè)變量：改變id值，對(duì)li進(jìn)行排序

實(shí)驗(yàn)vue.js代碼

// items data items: [{id: 2,},{id: 1,},{id: 3,},{id: 4,}, ] <!-- dom constructor --> <template><div class="content"><ul><li class="animate">對(duì)照組</li><li v-for="(item, key, index) in items" class="animate" v-bind:key="index">{{item.id}}</li><!-- 當(dāng)前綁定值為index --></ul></div></div> </template>

在實(shí)驗(yàn)二中，使用v-for提供的index參數(shù)作為綁定的key值，我們來(lái)看下效果：
渲染效果demo

改變第一個(gè)元素的id值，第一個(gè)li元素與其余三個(gè)li元素與對(duì)照組速度始終保持一致，沒(méi)有變化，說(shuō)明綁定index值并未對(duì)li渲染造成影響

為了驗(yàn)證1.觀點(diǎn)，我們對(duì)實(shí)驗(yàn)組按照升序進(jìn)行排列，查看DOM結(jié)構(gòu)，當(dāng)改變第一個(gè)元素位置時(shí)，第一個(gè)li元素重新渲染，其余三個(gè)li元素也重新渲染均且與對(duì)照組速度始終保持一致，說(shuō)明所有l(wèi)i元素均重新渲染，驗(yàn)證1.結(jié)論

---

實(shí)驗(yàn)三

• li綁定key值為 v-for提供的key參數(shù)
• 分別控制兩個(gè)變量：改變id值，對(duì)li進(jìn)行排序

實(shí)驗(yàn)vue.js代碼

// items data items: [{id: 2,},{id: 1,},{id: 3,},{id: 4,}, ] <!-- dom constructor --> <template><div class="content"><ul><li class="animate">對(duì)照組</li><li v-for="(item, key, index) in items" class="animate" v-bind:key="key">{{item.id}}</li><!-- 當(dāng)前綁定值為key --></ul></div></div> </template>

在實(shí)驗(yàn)二中，使用v-for提供的key參數(shù)作為綁定的key值，我們來(lái)看下效果：
渲染效果demo

改變第一個(gè)元素的id值，第一個(gè)li元素與其余三個(gè)li元素與對(duì)照組速度始終保持一致，沒(méi)有變化，說(shuō)明綁定key值并未對(duì)li渲染造成影響

為了驗(yàn)證1.觀點(diǎn)，我們對(duì)實(shí)驗(yàn)組按照升序進(jìn)行排列，查看DOM結(jié)構(gòu)，當(dāng)改變第一個(gè)元素位置時(shí)，第一個(gè)li元素重新渲染，其余三個(gè)li元素也重新渲染均且與對(duì)照組速度始終保持一致，說(shuō)明所有l(wèi)i元素均重新渲染，驗(yàn)證1.結(jié)論

---

實(shí)驗(yàn)結(jié)論

經(jīng)過(guò)三次對(duì)照實(shí)驗(yàn)（我們的實(shí)驗(yàn)采用了控制變量法，對(duì)照實(shí)驗(yàn)法進(jìn)行），我們可以得出結(jié)論：使用v-for渲染元素時(shí)，使用元素自身的id屬性去指定渲染元素的key值有利于單個(gè)元素的重新渲染，若采用其他如v-for提供的index, key等值，在改變渲染出來(lái)的DOM結(jié)構(gòu)時(shí)，會(huì)觸發(fā)所有元素的重新渲染，當(dāng)數(shù)據(jù)過(guò)大時(shí)，可能會(huì)造成性能負(fù)擔(dān)。

總結(jié)

當(dāng)我們?cè)谑褂胿-for進(jìn)行渲染時(shí)，盡可能使用渲染元素自身屬性的id給渲染的元素綁定一個(gè)key值，這樣在當(dāng)前渲染元素的DOM結(jié)構(gòu)發(fā)生變化時(shí)，能夠單獨(dú)響應(yīng)該元素而不觸發(fā)所有元素的渲染。

研究成員

TimRChen
libook

轉(zhuǎn)載于:https://www.cnblogs.com/tim100/p/7262963.html

總結(jié)

以上是生活随笔為你收集整理的Vue 2.0 v-for 响应式key, index及item.id参数对v-bind:key值造成差异研究的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。