v-for指令循環(huán)中key屬性有什么作用？

今天我們來(lái)聊一聊關(guān)于在vue中v-for指令中Key作用

key的特殊attribute主要用在Vue的虛擬DOM算法,在新舊nodes對(duì)比時(shí)辨識(shí)VNodes。如果不使用key, Vue會(huì)使用一 種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類型元素的算法。而使用key時(shí)，它會(huì)基于key的變化重新排列元素順序,并且會(huì)移除key不存在的元素。

有相同父元素的子元素必須有獨(dú)特的key,重復(fù)的key會(huì)造成渲染錯(cuò)誤。

在截圖中我們重點(diǎn)看紅線框選的話,接下來(lái)我們來(lái)使用個(gè)案例來(lái)演示一下

接下來(lái)我們來(lái)演示下我們添加水果后的效果

在添加商品之前將2號(hào)水果香蕉選中

然后我們輸入我們要添加的水果項(xiàng)，點(diǎn)擊添加按鈕，我們會(huì)發(fā)現(xiàn)我們之前選中的2號(hào)，選中的狀態(tài)變成了1號(hào)水果蘋(píng)果。

其實(shí)這個(gè)原因,可以參考在第一張截圖中提到關(guān)于key的描述 。如果不使用 key，Vue 會(huì)使用一種最大限度減少動(dòng)態(tài)元素并且盡可能的嘗試就地修改/復(fù)用相同類型元素的算法,由于我們?cè)谥皼](méi)有綁定key,vue在渲染的時(shí)候會(huì)盡可能少的更新減少動(dòng)態(tài)元素的創(chuàng)建,就是復(fù)選框并沒(méi)有重新創(chuàng)建渲染,只是在復(fù)用復(fù)選框。

接下來(lái)我們綁定key屬性

我們發(fā)現(xiàn)之前選中的2號(hào)水果的選中狀態(tài)并沒(méi)有更新，由此我們得出在做循環(huán)渲染的時(shí)候，一定要將key屬性綁定，否則會(huì)造成不必要的渲染錯(cuò)誤。

然后我們?cè)龠x中2號(hào)水果葡萄，再來(lái)添加新的水果。


猜你喜歡：
傳智播客web前端課程