vue中v-for爲什麼必須要設置 :key?

首先,可以通過以下方式設置key值,
在這裏插入圖片描述
在這裏插入圖片描述
id是唯一識別的,使用id屬性作爲key的值。

也有這樣設置key值的,

v-for="(item, index) in list" :key="index"

這樣設置的key值爲每一項的列表序號,0,1,2…
這兩種設置方式一般來說都可以,但是某些情況會出現差別

先說一下,設置key值是爲了提高動態加載的效率

假設有這樣一個場景,
有一個按鈕可以添加圖片,動態添加到pics參數中,
當我們點擊按鈕,pics添加了一個字典值,我們的圖片展示也會添加一張圖片。
一般我們都是添加到列表尾部,這樣兩種key的設置方法不會有區別,但如果添加到列表的中間,就會出現效率上的差別。
使用列表序號的話,如果插在中間,插入位置前面的key不用改變,無需重新渲染,但是插入位置後面的key都需要改變,需要重新渲染。
使用上面的id的話,我們只需要插入即可,其他的key值都不會改變,無需重新渲染。

設置key和不設置key
在這裏插入圖片描述
vue爲了提高虛擬DOM的效率,規定需要設置key值。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章