鍍金池/ 問答/HTML/ 為什么vue不自動(dòng)為所有v-for加上key來提高效率

為什么vue不自動(dòng)為所有v-for加上key來提高效率

vue v-for的key用于為每個(gè)節(jié)點(diǎn)做一個(gè)唯一標(biāo)識(shí),它既然可以提高虛擬DOM的更新效率,為什么vue不自動(dòng)為所有v-for加上key,而需要我們寫代碼時(shí)手動(dòng)指定key呢?

回答
編輯回答
浪婳

唯一性條件不同。

2017年11月12日 04:10
編輯回答
下墜

在官方文檔里就有說啊

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

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

建議盡可能在使用 v-for 時(shí)提供 key,除非遍歷輸出的 DOM 內(nèi)容非常簡單,或者是刻意依賴默認(rèn)行為以獲取性能上的提升

注:請(qǐng)注意黑體部分

因?yàn)樗?Vue 識(shí)別節(jié)點(diǎn)的一個(gè)通用機(jī)制,key 并不與 v-for 特別關(guān)聯(lián),key 還具有其他用途,我們將在后面的指南中看到其他用途。
列表渲染 -- Vue.js

2017年12月7日 22:18