2021-9-27 前端達人
我們現(xiàn)在在使用v-for的時候、都必須會加上一個必要的key值,并且很多人會使用index來作為key，其實這樣是不太妥當?shù)囊环N做法。那么v-for中的鍵值key到底有什么作用呢。請看：
當 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">
-
<!-- 內容 -->
-
</div>
建議盡可能在使用 v-for 時提供 key attribute，除非遍歷輸出的 DOM 內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。
-
<div v-for="(item,index) in list" :key="index"> {{item.name}}</div>
-
list: [
-
{
-
id: 1,
-
name: "name1",
-
},
-
{
-
id: 2,
-
name: "name2",
-
},
-
{
-
id: 3,
-
name: "name3",
-
}
-
]
這個場景如何我們不佳key vue 回直接報錯，所以大部分人都會使用index作為key的值
如果我們在添加一個數(shù)據(jù)
-
-
list: [
-
{
-
id: 1,
-
name: "name1",
-
},
-
{
-
id: 2,
-
name: "name2",
-
},
-
{
-
id: 3,
-
name: "name3",
-
},
-
{
-
id: 4,
-
name: "last",
-
},
-
]
此時前面3條數(shù)據(jù)直接服用之前的，新渲染最后一條數(shù)據(jù)，此時index作為key沒有任何問題
如何我們在中間添加一條
-
list: [
-
{
-
id: 1,
-
name: "name1",
-
},
-
{
-
id: 2,
-
name: "name2",
-
}, {
-
id: 4,
-
name: "last",
-
},
-
{
-
id: 3,
-
name: "name3",
-
}
-
]
此時我們更新渲染的數(shù)據(jù) 通過index 定義key 進行數(shù)據(jù)對比一下
之前的數(shù)據(jù)：
中間插入之后的數(shù)據(jù) ：
由此可以發(fā)現(xiàn)除了第一條數(shù)據(jù)可以復用以為其余的3條數(shù)據(jù)都是需要重新渲染，因為key的值發(fā)生了變化。
這個時候就可以體現(xiàn)出一個效率的問題，只插入一條數(shù)據(jù)，卻要從新渲染3條數(shù)據(jù)
所以我們需要可以想辦法讓數(shù)組中不會變化的數(shù)據(jù)的key值也不變，所以不能通過index來設置key值，應該設置一個唯一的id來標識數(shù)據(jù)的唯一性；我們修改之后再來對比一下渲染的效率：
之前的數(shù)據(jù)：
<div v-for="(item,index) in list" :key="item.id"> {{item.name}}</div>
中間插入之后的數(shù)據(jù)：
對此對比發(fā)現(xiàn)，只有一條數(shù)據(jù)發(fā)生改變，因為其他數(shù)據(jù)的id 都沒有變、所以對應的key也沒有發(fā)生改變。我們只需要渲染這一條新的數(shù)據(jù)就可以。 所以一般推薦使用id作為key值配合v-for使用
Vue很大的一個特點就是雙向數(shù)據(jù)綁定，數(shù)據(jù)一旦改變，那么頁面就渲染新的數(shù)據(jù)呈現(xiàn)在頁面上。但是對于用v-for渲染的列表數(shù)據(jù)來說，數(shù)據(jù)量可能一般很龐大，而且我們經(jīng)常還要對這個數(shù)據(jù)進行一些增刪改操作，而key的出現(xiàn)就是盡可能的回避這個問題，提高效率，如果我們給列表增加了一條數(shù)據(jù)，頁面只渲染了這數(shù)據(jù)。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
轉自：csdn
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯(lián)系，我們立即更正或刪除。
藍藍設計( www.bouu.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網(wǎng)站建設 、平面設計服務
藍藍設計的小編 http://www.bouu.cn