v-for中為什么要用key

必須用key,且不能是index和random
diff算法中通過tag和key來判斷是不是sameNode(相同節(jié)點)
減少污染次數(shù),提升渲染性能

http://www.itdecent.cn/p/229fcc64767d

維護狀態(tài)

當 Vue 正在更新使用 v-for 渲染的元素列表時,它默認使用“就地更新”的策略。如果數(shù)據(jù)項的順序被改變,Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項的順序,而是就地更新每個元素,并且確保它們在每個索引位置正確渲染。這個類似 Vue 1.x 的 track-by="$index"。

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

為了給 Vue 一個提示,以便它能跟蹤每個節(jié)點的身份,從而重用和重新排序現(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)容非常簡單,或者是刻意依賴默認行為以獲取性能上的提升。

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

不要使用對象或數(shù)組之類的非基本類型值作為 v-forkey。請用字符串或數(shù)值類型的值。

更多 key attribute 的細節(jié)用法請移步至 key 的 API 文檔。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

友情鏈接更多精彩內(nèi)容