更新時(shí)間:2020-07-20 來(lái)源:黑馬程序員 瀏覽量:
今天我們來(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前端課程