v-for中key的作用與原理 _生活百科_經(jīng)驗(yàn)總結(jié)

一、虛擬DOM中key的作用key是虛擬DOM對(duì)象的標(biāo)識(shí) ，當(dāng)數(shù)據(jù)發(fā)生變化時(shí) ， Vue會(huì)根據(jù)新數(shù)據(jù)生成新的虛擬DOM ，隨后Vue會(huì)對(duì)新虛擬DOM與舊虛擬DOM的差異進(jìn)行比較。
二、如何選擇key最好使用每條數(shù)據(jù)的唯一標(biāo)識(shí)作為key ，用一個(gè)簡(jiǎn)單的例子說(shuō)明：
1.用index作為key時(shí)點(diǎn)擊按鈕在列表最前方添加趙六用戶
<ul><li v-for="(p,index) of persons" :key="index">{{p.name}}<input type="text"></li><br><button @click="Add">在最前方添加一個(gè)用戶</button></ul> data () {return {persons: [{id: '01', name: '張三'},{id: '02', name: '李四'},{id: '03', name: '王五'}]}},methods: {Add () {let p = {id: '04', name: '趙六'}this.persons.unshift(p)}}點(diǎn)擊以后，頁(yè)面如下圖

文章插圖
然而，如果在我點(diǎn)擊按鈕前，在輸入框中輸入一些內(nèi)容

文章插圖
點(diǎn)擊按鈕后就會(huì)變成

文章插圖
很明顯，這并不是我們理想中想要呈現(xiàn)的效果。
2.用id作為key時(shí)

<ul><li v-for="p of persons" :key="p.id">{{p.name}}<input type="text"></li><br><button @click="Add">在最前方添加一個(gè)用戶</button></ul>

在輸入框中輸入與之前相同的內(nèi)容，點(diǎn)擊按鈕后這次的頁(yè)面則變成了下圖

文章插圖
很明顯，這次就對(duì)了！
三、原因分析為什么用id和index作為key出來(lái)的效果天差地別呢，首先來(lái)分析一下key的作用原理。
用index作為key時(shí)：

文章插圖
首先會(huì)根據(jù)初始數(shù)據(jù)生成虛擬DOM ，然后將虛擬DOM轉(zhuǎn)為真實(shí)DOM ，在加入新數(shù)據(jù)以后，再根據(jù)新數(shù)據(jù)生成新的虛擬DOM ，此時(shí)Vue并不會(huì)再重新將新虛擬DOM直接轉(zhuǎn)為真實(shí)DOM ，而是進(jìn)行一個(gè)虛擬DOM的對(duì)比算法。如下：

文章插圖
首先在新的虛擬DOM中按照順序取出第一項(xiàng) ，然后根據(jù)標(biāo)識(shí)“key=0”在舊的虛擬DOM中尋找擁有一樣“key=0”的節(jié)點(diǎn) ，然后開(kāi)始挨個(gè)對(duì)比。

文章插圖
第一個(gè)節(jié)點(diǎn)為文本節(jié)點(diǎn) ， Vue發(fā)現(xiàn)一個(gè)為張三一個(gè)為趙六，不一致，于是將新的文本節(jié)點(diǎn)趙六轉(zhuǎn)為真實(shí)DOM

文章插圖
然后來(lái)到第二個(gè)標(biāo)簽節(jié)點(diǎn)input ，需要注意的是，我們對(duì)文本框的輸入是在真實(shí)DOM中操作的，但在虛擬DOM中兩邊的標(biāo)簽節(jié)點(diǎn)input是一樣的，所以這時(shí)候Vue不會(huì)將它重新轉(zhuǎn)成真實(shí)DOM ，而是直接復(fù)用左邊的。

文章插圖
以此類(lèi)推， key等于1和等于2時(shí) ，文本節(jié)點(diǎn)重新轉(zhuǎn)為真實(shí)DOM ，標(biāo)簽節(jié)點(diǎn)復(fù)用。

文章插圖
當(dāng)來(lái)到key等于3這一項(xiàng)時(shí) ，發(fā)現(xiàn)左邊并沒(méi)有key是等于3的一項(xiàng) ，所以這個(gè)時(shí)候， Vue直接將右邊key等于3這一項(xiàng)直接轉(zhuǎn)為真實(shí)DOM 。
用id作為key時(shí)：