當 Vue.js 用 v-for 正在更新已渲染過的元素列表時，它默認用 “就地復用” 策略。如果數據項的順序被改變，Vue將不是移動 DOM 元素來匹配數據項的順序， 而是簡單復用此處每個元素，並且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 Vue 1.x 的 track-by="$index" 。
這個默認的模式是有效的，但是只適用於不依賴子組件狀態或臨時 DOM 狀態（例如：表單輸入值）的列表渲染輸出。
為了給 Vue 一個提示，以便它能跟蹤每個節點的身份，從而重用和重新排序現有元素，你需要為每項提供一個唯一 key屬性。理想的 key 值是每項都有唯一 id。這個特殊的屬性相當於 Vue 1.x 的 track-by ，但它的工作方式類似於一個屬性，所以你需要用 v-bind 來綁定動態值（在這里使用簡寫）：
<div v-for="item in items" :key="item.id"> <!-- 內容 --> </div>
建議盡可能使用 v-for 來提供 key ，除非迭代 DOM 內容足夠簡單，或者你是故意要依賴於默認行為來獲得性能提升。
因為它是 Vue 識別節點的一個通用機制， key 並不特別與 v-for 關聯，key 還具有其他用途，我們將在后面的指南中看到其他用途。建議盡可能使用 v-for 來提供 key ，除非迭代 DOM 內容足夠簡單，或者你是故意要依賴於默認行為來獲得性能提升。