教育行業(yè)A股IPO第一股（股票代碼 003032）

全國咨詢/投訴熱線：400-618-4000

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

更新時間:2020年07月20日18時14分 來源:傳智播客 瀏覽次數(shù):

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

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

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

在截圖中我們重點看紅線框選的話,接下來我們來使用個案例來演示一下

v-for指令循環(huán)中key2

接下來我們來演示下我們添加水果后的效果

在添加商品之前將2號水果香蕉選中

v-for指令循環(huán)中key3

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

v-for指令循環(huán)中key04


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

接下來我們綁定key屬性

v-for指令循環(huán)中key5

06


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

v-for指令循環(huán)中key09

然后我們再選中2號水果葡萄，再來添加新的水果。


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

0 分享到：
和我們在線交談！