用key
管理可復用的元素
Vue 會盡可能高效地渲染元素挑势,通常會復用已有元素而不是從頭開始渲染。
同時 Vue 提供了一種方式來滿足不復用已有元素的業(yè)務場景潮饱,此時只需要添加一個具有唯一值key
屬性。
當 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 內容非常簡單倍试,或者是刻意依賴默認行為以獲取性能上的提升蛋哭。