首先,可以通過以下方式設置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值。