這篇文章主要講解了Vue中key的詳細解析，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。

站在用戶的角度思考問題，與客戶深入溝通，找到民權網站設計與民權網站推廣的解決方案，憑借多年的經驗，讓設計與互聯(lián)網技術結合，創(chuàng)造個性化、用戶體驗好的作品，建站類型包括：成都網站設計、做網站、企業(yè)官網、英文網站、手機端網站、網站推廣、國際域名空間、虛擬主機、企業(yè)郵箱。業(yè)務覆蓋民權地區(qū)。

Vue中key的作用

key的特殊attribute主要用在Vue的虛擬DOM算法，在新舊Nodes對比時辨識VNodes。如果不使用key，Vue會使用一種大限度減少動態(tài)元素并且盡可能的嘗試就地修改、復用相同類型元素的算法，而使用key時，它會基于key的變化重新排列元素順序，并且會移除key不存在的元素。此外有相同父元素的子元素必須有獨特的key，重復的key會造成渲染錯誤。

描述

首先是官方文檔的描述，當Vue正在更新使用v-for渲染的元素列表時，它默認使用就地更新的策略，如果數(shù)據(jù)項的順序被改變，Vue將不會移動DOM元素來匹配數(shù)據(jù)項的順序，而是就地更新每個元素，并且確保它們在每個索引位置正確渲染。這個默認的模式是高效的，但是只適用于不依賴子組件狀態(tài)或臨時DOM狀態(tài)的列表渲染輸出，例如表單輸入值。為了給Vue一個提示，以便它能跟蹤每個節(jié)點的身份，從而重用和重新排序現(xiàn)有元素，你需要為每項提供一個唯一 key attribute，建議盡可能在使用v-for時提供key attribute，除非遍歷輸出的DOM內容非常簡單，或者是刻意依賴默認行為以獲取性能上的提升。

簡單來說，當在列表循環(huán)中使用key時，需要使用key來給每個節(jié)點做一個唯一標識，diff算法就可以正確的識別此節(jié)點，找到正確的位置直接操作節(jié)點，盡可能地進行重用元素，key的作用主要是為了高效的更新虛擬DOM。此外，使用index作為key是并不推薦的做法，其只能保證Vue在數(shù)據(jù)變化時強制更新組件，以避免原地復用帶來的副作用，但不能保證大限度的元素重用，且使用index作為key在數(shù)據(jù)更新方面和不使用key的效果基本相同。

示例

首先定義一個Vue實例，渲染四個列表，分別為簡單列表與復雜列表，以及其分別攜帶key與不攜帶key時對比其更新渲染時的速度，本次測試使用的是Chrome 81.0，每次在Console執(zhí)行代碼時首先會進行刷新重新加載界面，避免瀏覽器以及Vue自身優(yōu)化帶來的影響。

 


 

 

 
{{item}}
 

 

 
{{item}}
 

 

 

 {{value}}
 
 

 

 

 {{value}}
 
 

 

當前標題：Vue中key的詳細解析-創(chuàng)新互聯(lián)
當前網址：http://weahome.cn/article/dpjpjh.html