Vue2.0中v-for渲染數(shù)據(jù)時(shí)，如果沒有綁定key會(huì)有錯(cuò)誤警告，這樣該有何用處，為什么一定要綁定key

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

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

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

<div v-for="item in items" :key="item.id">
<!-- 內(nèi)容 -->
</div>
建議盡可能在使用 v-for 時(shí)提供 key，除非遍歷輸出的 DOM 內(nèi)容非常簡(jiǎn)單，或者是刻意依賴默認(rèn)行為以獲取性能上的提升。