Vue 2.0 v-for 響應式key, index及item.id參數對v-bind:key值造成差異研究

在github上閱覽README.md以獲得最佳閱讀體驗，點這里

v-for響應式key, index及item.id參數對v-bind:key值造成差異研究

實驗背景

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

實驗目的

總結出在采用不同參數作為元素綁定key值時，出現的不同的渲染結果，得出最優渲染方案

實驗準備

我們準備第三個可以作為綁定key值的變量，分別是:

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

我們制定一個參照表格

---

li綁定key值類型idindexkey

實驗一	選取	x	x
實驗二	x	選取	x
實驗三	x	x	選取

---

實驗一

• li綁定key值為自帶屬性id
• 分別控制兩個變量：改變id值，對li進行排序

實驗vue.js代碼

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

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

改變第一個元素的id值，第一個li元素重新渲染，其余三個li元素與對照組速度始終保持一致，沒有變化，說明li元素單獨渲染

為了驗證1.觀點，我們對實驗組按照升序進行排列，查看DOM結構，當改變第一個元素位置時，第一個li元素重新渲染，其余三個li元素不重新渲染且與對照組速度始終保持一致，說明第一個li元素單獨渲染，驗證1.結論

---

實驗二

• li綁定key值為 v-for提供的index參數
• 分別控制兩個變量：改變id值，對li進行排序

實驗vue.js代碼

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

在實驗二中，使用v-for提供的index參數作為綁定的key值，我們來看下效果：
渲染效果demo

改變第一個元素的id值，第一個li元素與其余三個li元素與對照組速度始終保持一致，沒有變化，說明綁定index值并未對li渲染造成影響

為了驗證1.觀點，我們對實驗組按照升序進行排列，查看DOM結構，當改變第一個元素位置時，第一個li元素重新渲染，其余三個li元素也重新渲染均且與對照組速度始終保持一致，說明所有li元素均重新渲染，驗證1.結論

---

實驗三

• li綁定key值為 v-for提供的key參數
• 分別控制兩個變量：改變id值，對li進行排序

實驗vue.js代碼

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

在實驗二中，使用v-for提供的key參數作為綁定的key值，我們來看下效果：
渲染效果demo

改變第一個元素的id值，第一個li元素與其余三個li元素與對照組速度始終保持一致，沒有變化，說明綁定key值并未對li渲染造成影響

為了驗證1.觀點，我們對實驗組按照升序進行排列，查看DOM結構，當改變第一個元素位置時，第一個li元素重新渲染，其余三個li元素也重新渲染均且與對照組速度始終保持一致，說明所有li元素均重新渲染，驗證1.結論

---

實驗結論

經過三次對照實驗（我們的實驗采用了控制變量法，對照實驗法進行），我們可以得出結論：使用v-for渲染元素時，使用元素自身的id屬性去指定渲染元素的key值有利于單個元素的重新渲染，若采用其他如v-for提供的index, key等值，在改變渲染出來的DOM結構時，會觸發所有元素的重新渲染，當數據過大時，可能會造成性能負擔。

總結

當我們在使用v-for進行渲染時，盡可能使用渲染元素自身屬性的id給渲染的元素綁定一個key值，這樣在當前渲染元素的DOM結構發生變化時，能夠單獨響應該元素而不觸發所有元素的渲染。

研究成員

TimRChen
libook

轉載于:https://www.cnblogs.com/tim100/p/7262963.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。