react、vue中的key有什么作用?(key的內部原理)

1、虛擬DOM中key的作用:

key是虛擬DOM中對象的標識,當數據發生變化時,Vue會根據【新數據】生成【新的虛擬DOM】,隨后Vue進行【新虛擬DOM】與【舊虛擬DOM】的差異比較,比較規則如下:

2、對比規則:

1)舊虛擬DOM中找到了與新虛擬DOM相同的key:

????????a.若虛擬DOM中內容沒變, 直接使用之前的真實DOM

????????b.若虛擬DOM中內容變了, 則生成新的真實DOM,隨后替換掉頁面中之前的真實DOM

2)舊虛擬DOM中未找到與新虛擬DOM相同的key:創建新的真實DOM,隨后渲染到到頁面

3、用index作為key可能會引發的問題:

a.若對數據進行逆序添加、逆序刪除等破壞順序操作:會產生沒有必要的真實DOM更新 ==> 界面效果沒問題, 但效率低

b.若結構中還包含輸入類的DOM:會產生錯誤DOM更新 ==> 界面有問題


index作為key


id作為key

4、開發中如何選擇key?

a.最好使用每條數據的唯一標識作為key,比如id、手機號、身份證號、學號等唯一值

b.如果不存在對數據的逆序添加、逆序刪除等破壞順序的操作,僅用于渲染列表,使用index作為key是沒有問題的

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容