在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ Vue2.0中v-for渲染數(shù)據(jù)時,如果沒有綁定key會有錯誤警告,這樣該有何用

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

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

圖片描述

圖片描述

回答
編輯回答
吃藕丑

當 Vue.js 用 v-for 正在更新已渲染過的元素列表時,它默認用“就地復(fù)用”策略。如果數(shù)據(jù)項的順序被改變,Vue 將不會移動 DOM 元素來匹配數(shù)據(jù)項的順序, 而是簡單復(fù)用此處每個元素,并且確保它在特定索引下顯示已被渲染過的每個元素。這個類似 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">
<!-- 內(nèi)容 -->
</div>
建議盡可能在使用 v-for 時提供 key,除非遍歷輸出的 DOM 內(nèi)容非常簡單,或者是刻意依賴默認行為以獲取性能上的提升。

2018年6月21日 13:46