Vue中key的原理以及diff算法詳解

更新時(shí)間：2025年04月01日 14:26:02 作者：謙虛且進(jìn)步

這篇文章主要介紹了Vue中key的原理以及diff算法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

Vue中key的原理以及diff算法

簡(jiǎn)介

Vue的key用于在虛擬DOM中標(biāo)記節(jié)點(diǎn)，方便后面的diff對(duì)比算法進(jìn)行對(duì)比，提升效率。

Vue的vm或者vc實(shí)例一共管理著3個(gè)DOM對(duì)象

分別他的模板對(duì)應(yīng)的真實(shí)DOM、真實(shí)DOM的備份、以及重新生成的新的DOM，后兩個(gè)可以看成是虛擬DOM，只要后面兩個(gè)DOM的DOM樹(shù)的葉子或者節(jié)點(diǎn)不一樣（被指令操作虛擬DOM進(jìn)行了修改），那么就會(huì)通過(guò)渲染函數(shù)render重新更新HTML頁(yè)面上的真實(shí)DOM。

使用列表渲染時(shí)

會(huì)生成新的節(jié)點(diǎn)，這些節(jié)點(diǎn)不是一開(kāi)始在模板當(dāng)中寫的，屬于后來(lái)的DOM節(jié)點(diǎn)，所以需要特殊管理。

列表渲染新生成的DOM節(jié)點(diǎn)一般是一棵子DOM樹(shù)

使用key可以記錄這棵子樹(shù)的根節(jié)點(diǎn)，diff差分算法就是根據(jù)從這個(gè)子樹(shù)的根節(jié)點(diǎn)開(kāi)始進(jìn)行對(duì)比，判斷DOM節(jié)點(diǎn)是否發(fā)生變化。

如果發(fā)現(xiàn)key不存在，直接創(chuàng)建新的子樹(shù)。
如果key存在，則會(huì)對(duì)子樹(shù)遍歷。但是對(duì)于一些在HTML中的真實(shí)DOM中存在的內(nèi)容，比如input框里面的內(nèi)容，Vue是不知道的，因?yàn)閂ue只有一開(kāi)始真實(shí)DOM的備份，后面這個(gè)HTML頁(yè)面上的真實(shí)DOM發(fā)生了什么變化Vue是不知道的。這就會(huì)導(dǎo)致真實(shí)DOM的一部分被替換掉，而另外一部分還是殘留的老的真實(shí)DOM。

如果遍歷容器時(shí)

使用index作為key，則會(huì)出現(xiàn)部分真實(shí)DOM殘留的問(wèn)題。實(shí)際開(kāi)發(fā)中，一般使用獨(dú)一無(wú)二的index作為key。

總結(jié)如下

最好使用每條數(shù)據(jù)的唯一標(biāo)識(shí)作為key，比如id、手機(jī)號(hào)、身份證號(hào)、學(xué)號(hào)等唯一值
如果不存在對(duì)數(shù)組數(shù)據(jù)的逆序添加、逆序刪除等破壞順序的操作，僅用于渲染列表，使用index作為key是沒(méi)有問(wèn)題的