我們可以看到，張三、李四、王五的索引分為別0，1，2


點(diǎn)擊按鈕，添加一個(gè)新人物，這個(gè)時(shí)候索引發(fā)生了變化，新添加的人物“老劉”變?yōu)榱怂饕?，似乎對(duì)，也似乎不對(duì)

當(dāng)然，單純地討論索引，這里一點(diǎn)問(wèn)題也沒(méi)有，下面舉一個(gè)新例子，來(lái)說(shuō)說(shuō)“不對(duì)“在哪里

2.3 再修改一下示例

不展示索引了，改為輸入框，在每個(gè)人物后面的輸入框內(nèi)寫(xiě)上人物的姓，觀察新插入數(shù)據(jù)后原始數(shù)據(jù)的變化

稍微修改一下html

    {{p.name}}-{{p.age}}    

實(shí)際效果就是下圖這樣


到這里，似乎沒(méi)有什么不對(duì)，接下來(lái)就是見(jiàn)證奇跡的時(shí)刻

添加老劉，出現(xiàn)了問(wèn)題，和我們預(yù)想的不一樣。

這是key為index的情況，如果修改為數(shù)據(jù)的唯一標(biāo)識(shí)，則不會(huì)產(chǎn)生這樣的問(wèn)題。

    {{p.name}}-{{p.age}}    

誒，這就是我們想要的。


列表內(nèi)有輸入內(nèi)容，后續(xù)操作破壞了原始順序，如果以index作為key，就會(huì)產(chǎn)生錯(cuò)誤DOM

3. key的實(shí)現(xiàn)原理

要解釋key的實(shí)現(xiàn)原理，就要引入Vue一個(gè)十分重要的概念——【虛擬DOM】。

給出一組數(shù)據(jù)，Vue要把這些數(shù)據(jù)渲染到頁(yè)面上，首先要生成【虛擬DOM】，然后根據(jù)【虛擬DOM】去生成【真實(shí)的DOM】。如果數(shù)據(jù)發(fā)生了改變，Vue會(huì)生成【新的虛擬DOM】，注意，這個(gè)【新的虛擬DOM】并不會(huì)直接生成【新的真實(shí)DOM】，否則虛擬DOM一點(diǎn)用處也沒(méi)有了。Vue的操作是，拿根據(jù)新的數(shù)據(jù)生成的【新的虛擬DOM】與之前的【真實(shí)的DOM】去做比較，如果相同，直接延用即可（“拿來(lái)主義”）；如果不同，則生成新的DOM對(duì)象。

在這個(gè)過(guò)程中key扮演了很重要的角色。

根據(jù)最后一個(gè)示例進(jìn)行剖析。

3.1 key為index的情況

根據(jù)數(shù)據(jù)生成【真實(shí)DOM】的流程如下：（注意，下圖的真實(shí)DOM中輸入框里的內(nèi)容為生成頁(yè)面后手動(dòng)添加）

然后，添加人物“老劉”，獲取到一組新數(shù)據(jù)

Vue拿新數(shù)據(jù)生成【新的虛擬DOM】

在生成真實(shí)DOM，就需要用新生成的虛擬DOM和原來(lái)的真實(shí)DOM作比較（一條一條分析）

對(duì)比第一條，key為0，找到舊DOM中key為0的數(shù)據(jù)，發(fā)現(xiàn)“老劉-40”和“張三-18”不同，渲染新的數(shù)據(jù)“老劉-40”到頁(yè)面上；再往后，發(fā)現(xiàn)同為輸入框，不必重新渲染，直接使用原來(lái)真實(shí)DOM的內(nèi)容。第一條內(nèi)容就出現(xiàn)了，而這個(gè)輸入框還攜帶有張三的姓。

對(duì)比第二條，key為1，找到舊DOM中key為1的數(shù)據(jù)，發(fā)現(xiàn)“張三-18”和“李四-19”不同，渲染新的數(shù)據(jù)“張三-18”到頁(yè)面上；再往后，發(fā)現(xiàn)同為輸入框，不必重新渲染，直接使用原來(lái)真實(shí)DOM的內(nèi)容。第二條內(nèi)容就出現(xiàn)了，而這個(gè)輸入框還攜帶有李四的姓。

之后同理。

回顧這個(gè)過(guò)程，key是作為虛擬DOM中對(duì)象的唯一標(biāo)識(shí)，標(biāo)識(shí)出了數(shù)據(jù)的“身份信息”，Vue在虛擬DOM中會(huì)根據(jù)這個(gè)“身份標(biāo)識(shí)”去對(duì)比內(nèi)容，設(shè)計(jì)的初衷是為了節(jié)省資源開(kāi)支，不必渲染重復(fù)的部分。在本示例中，不但帶來(lái)了效率問(wèn)題，還渲染出了錯(cuò)誤的DOM，后果非常嚴(yán)重。

3.2 key為id的情況

直接進(jìn)入添加“老劉”后的新舊DOM對(duì)比。

對(duì)比第一條，key為‘004’，發(fā)現(xiàn)在舊DOM中并不存在，直接生成“老劉-40”和新的輸入框。

對(duì)比第二條，key為‘001’，發(fā)現(xiàn)舊DOM中key為‘001’的數(shù)據(jù)相同，直接將“張三-18”和輸入框拿過(guò)來(lái)使用。

……

最后生成正確的DOM，節(jié)省了資源開(kāi)支。

到此，相信大家對(duì)“vue的key怎么使用”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！