為什么要添加key？
key 的特殊 attribute 主要用在 Vue 的虛擬 DOM 算法，在新舊 nodes 對(duì)比時(shí)辨識(shí) VNodes。如果不使用 key，Vue 會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類型元素的算法。而使用 key 時(shí)，它會(huì)基于 key 的變化重新排列元素順序，并且會(huì)移除 key 不存在的元素。
如果不加key呢？
當(dāng)頁(yè)面循環(huán)列表中有 input 標(biāo)簽，用戶填寫信息后，刪除中間某一項(xiàng)。
例如：頁(yè)面中循環(huán)列表長(zhǎng)度為3，并含有input標(biāo)簽，將input中填入信息，刪除中間第二項(xiàng)。
刪除后
頁(yè)面中不加key，刪除數(shù)據(jù)的其中一項(xiàng)，對(duì)應(yīng)刪除 DOM 節(jié)點(diǎn)中的最后一項(xiàng)，可以減少頁(yè)面重排重繪，DOM 節(jié)點(diǎn)就地復(fù)用，頁(yè)面中可能會(huì)存在一些數(shù)據(jù)展示的問(wèn)題。
添加key
點(diǎn)擊刪除后
key 可以作為VNode的唯一標(biāo)識(shí)，vue通過(guò)diff算法，加快查詢節(jié)點(diǎn)的速度，刪除對(duì)應(yīng)的dom節(jié)點(diǎn)。
key的作用
key給每個(gè)VNode唯一的id，可以通過(guò)key更快的拿到VNode節(jié)點(diǎn)
-
更準(zhǔn)確
每個(gè)key都有唯一，新舊節(jié)點(diǎn)對(duì)比的時(shí)候可以避免就地復(fù)用
-
更快
利用key的唯一性，生成map對(duì)象獲取對(duì)應(yīng)節(jié)點(diǎn)，比遍歷的方式更快
為什么不能使用 index 作為 key
如果 index 作為key，刪除后
當(dāng)?shù)诙?xiàng)刪除的時(shí)候，第三項(xiàng)的下標(biāo)2會(huì)變成1，index在改變，沒(méi)有辦法準(zhǔn)確定位到需要?jiǎng)h除的 DOM 節(jié)點(diǎn)。
代碼
<div v-for="(item,index) in arr" :key="index">
{{item}}
<input type="text">
</div>
delete(){
this.arr.splice(1, 1)
}
參考資料
vue 官方文檔：
https://cn.vuejs.org/v2/api/#key
