我們現(xiàn)在在使用v-for的時候冯丙、都必須會加上一個必要的key值,并且很多人會使用index來作為key，其實(shí)這樣是不太妥當(dāng)?shù)囊环N做法遭京。那么v-for中的鍵值key到底有什么作用呢胃惜。請看：
官方給出的解答
當(dāng) Vue 正在更新使用 v-for 渲染的元素列表時，它默認(rèn)使用“就地更新”的策略哪雕。如果數(shù)據(jù)項的順序被改變船殉，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項的順序，而是就地更新每個元素斯嚎，并且確保它們在每個索引位置正確渲染利虫。這個類似 Vue 1.x 的 track-by="$index"。
這個默認(rèn)的模式是高效的堡僻，但是只適用于不依賴子組件狀態(tài)或臨時 DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出糠惫。
為了給 Vue 一個提示，以便它能跟蹤每個節(jié)點(diǎn)的身份苦始，從而重用和重新排序現(xiàn)有元素寞钥，你需要為每項提供一個唯一 key attribute：
<div v-for="item in items" v-bind:key="item.id">
<!-- 內(nèi)容 -->
</div>
建議盡可能在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內(nèi)容非常簡單陌选，或者是刻意依賴默認(rèn)行為以獲取性能上的提升理郑。
舉例
<div v-for="(item,index) in list" :key="index"> {{item.name}}</div>
list: [
{
id: 1,
name: "name1",
},
{
id: 2,
name: "name2",
},
{
id: 3,
name: "name3",
}
]
這個場景如何我們不佳key vue 回直接報錯，所以大部分人都會使用index作為key的值
如果我們在添加一個數(shù)據(jù)
list: [
{
id: 1,
name: "name1",
},
{
id: 2,
name: "name2",
},
{
id: 3,
name: "name3",
},
{
id: 4,
name: "last",
},
],
此時前面3條數(shù)據(jù)直接服用之前的咨油，新渲染最后一條數(shù)據(jù)您炉，此時index作為key沒有任何問題
如何我們在中間添加一條
list: [
{
id: 1,
name: "name1",
},
{
id: 2,
name: "name2",
}, {
id: 4,
name: "last",
},
{
id: 3,
name: "name3",
}
],
此時我們更新渲染的數(shù)據(jù) 通過index 定義key 進(jìn)行數(shù)據(jù)對比一下
之前的數(shù)據(jù)
| key | index | name |
|---|---|---|
| 0 | 0 | name1 |
| 1 | 1 | name2 |
| 2 | 2 | name3 |
中間插入之后的數(shù)據(jù)
| key | index | name |
|---|---|---|
| 0 | 0 | name1 |
| 1 | 1 | last |
| 2 | 2 | name2 |
| 3 | 3 | name3 |
由此可以發(fā)現(xiàn)除了第一條數(shù)據(jù)可以復(fù)用以為其余的3條數(shù)據(jù)都是需要重新渲染，因?yàn)閗ey的值發(fā)生了變化役电。
這個時候就可以體現(xiàn)出一個效率的問題赚爵，只插入一條數(shù)據(jù)，卻要從新渲染3條數(shù)據(jù)
所以我們需要可以想辦法讓數(shù)組中不會變化的數(shù)據(jù)的key值也不變法瑟，所以不能通過index來設(shè)置key值冀膝，應(yīng)該設(shè)置一個唯一的id來標(biāo)識數(shù)據(jù)的唯一性；我們修改之后再來對比一下渲染的效率：
之前的數(shù)據(jù)：
<div v-for="(item,index) in list" :key="item.id"> {{item.name}}</div>
| key | id | index | name |
|---|---|---|---|
| 1 | 1 | 0 | name1 |
| 2 | 2 | 1 | name2 |
| 3 | 3 | 2 | name3 |
中間插入之后的數(shù)據(jù)：
| key | id | index | name |
|---|---|---|---|
| 1 | 1 | 0 | name1 |
| 2 | 2 | 1 | name2 |
| 4 | 4 | 2 | last |
| 3 | 3 | 3 | name4 |
對此對比發(fā)現(xiàn)霎挟，只有一條數(shù)據(jù)發(fā)生改變窝剖，因?yàn)槠渌麛?shù)據(jù)的id 都沒有變、所以對應(yīng)的key也沒有發(fā)生改變酥夭。我們只需要渲染這一條新的數(shù)據(jù)就可以赐纱。 所以一般推薦使用id作為key值配合v-for使用
