首頁技術文章正文

在vue中v-for指令中key作用

更新時間:2020-07-20 來源:黑馬程序員 瀏覽量:

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

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

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

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

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

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

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

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

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

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


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

接下來我們綁定key屬性

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

06


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

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

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


猜你喜歡:
黑馬程序員web前端課程

分享到:
在線咨詢 我要報名
和我們在線交談!