Vue中的key有什么作用

1、 虛擬DOM中key的作用

Key是虛擬DOM對象的標(biāo)識，當(dāng)數(shù)據(jù)發(fā)生變化時，Vue會根據(jù)新數(shù)據(jù)生成新的虛擬DOM，隨后VUe進(jìn)行新虛擬DOM 與 舊虛擬DOM的差異對比，比較規(guī)則如下：

2、對比規(guī)則：

(1)、舊虛擬Dom中找到了與新虛擬DOM相同的key：

????????????? ①若虛擬DOM中內(nèi)容沒變，直接使用之前的真實(shí)DOM

? ? ? ? ? ? ? ?②若虛擬DOM中內(nèi)容變了，則生成新的真實(shí)DOM，隨后替換掉頁面中之前的真實(shí)DOM。

⑵、舊虛擬DOM中未找到與新虛擬DOM相同的key， 創(chuàng)建新的真實(shí)DOM，隨后渲染到頁面

3、 用index作為key可能會引發(fā)的問題

1、 若對數(shù)據(jù)進(jìn)行：逆序添加、逆序刪除等破壞順序操作；

會產(chǎn)生沒必要的真實(shí)DOM更新è頁面效果沒問題，但效率低

2、 如果結(jié)構(gòu)中還包含輸入類的DOM：

會產(chǎn)生錯誤DOM更新è頁面有問題

4、 開發(fā)中如何選擇key

最好使用每條數(shù)據(jù)的唯一標(biāo)識作為key，比如id，手機(jī)號，身份證號，學(xué)號等唯一值。

如果不存在對數(shù)據(jù)的逆序添加，逆序刪除等破壞順序操作，僅用于渲染列表用于展示，使用index作為key是沒問題的。

5、Key的作用和原理

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容