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值類型 | id | index | key |
|---|---|---|---|
| 實驗一 | 選取 | 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
