當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用“就地復用”策略。如果數(shù)據(jù)項的順序被改變，Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項的順序， 而是簡單復用此處每個元素，并且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的 track-by="$index" 。

這個默認的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時 DOM 狀態(tài) (例如：表單輸入值) 的列表渲染輸出。

為了給 Vue 一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項提供一個唯一 key 屬性。理想的 key 值是每項都有的唯一 id。這個特殊的屬性相當于 Vue 1.x 的 track-by ，但它的工作方式類似于一個屬性，所以你需要用 v-bind 來綁定動態(tài)值 (在這里使用簡寫)：

<div v-for="item in items" :key="item.id"> </div>

建議盡可能在使用 v-for 時提供 key，除非遍歷輸出的 DOM 內(nèi)容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。

因為它是 Vue 識別節(jié)點的一個通用機制，key 并不與 v-for 特別關聯(lián)，key 還具有其他用途，我們將在后面的指南中看到其他用途。

以上來自 vue官方文檔

簡單來說，vue在進行頁面更新時，會通過Diff算法對虛擬DOM進行更新，因為真實的DOM消耗比較大。 假設我們需要對數(shù)組進行增刪改查，我們需要快速定位到某一項，所以我們需要給每項綁一個具體的唯一的id值

有key和沒key的差異

例如我們要在BC中間插入一個節(jié)點

image.png

Diff算法默認執(zhí)行時這樣的

image.png

就是把C變成F，D變成C，E變成D，最后插入E，是不是很麻煩

有key和沒有key的區(qū)別

image.png

為什么key盡量不要使用index