爲什麼v-for中的key值不推薦使用index

首先我們舉一個例子

我們現在有這個數組

[
    {
        id:201401,
        name:'chen'
    },
    {
        id:201402,
        name:'sun'
    },          {
        id:201403,
        name:'wang'
    },
  ]
複製代碼

如果我們使用index做key在我們渲染到頁面的時候變成

<ul>

li key:0 ，id:201401,name:chen

li key:1 , id:201402,name:sun

li key:2 , id:201403,name:wang

</ul>

如果我們要在中間插入一條數組{id:201404,name:zhou}

<ul>

li key:0 ，id:201401,name:chen

li key:1 ，id:201404,name:wang

li key:2 , id:201402,name:sun

li key:3 , id:201403,name:wang

</ul>

當我們在中間插入新元素的時候 新元素的key值理所應當變成了index=1，key值也就變成了1 而原本index==1的li元素的index就變成了2，原本index==2的元素key值就變成了3 。 這樣就導致虛擬dom的diff算法在做比較的時候發現，key值爲1，2，3的元素和原來的key值爲1，2，3的元素對比的時候發現二者不一樣，diff算法就會重新渲染這三個元素，原本key值爲1，2的元素內容沒有發生變化，但是因爲key值使用的是index所以還需要重新渲染，這就失去了虛擬dom在性能上的優勢，所有我們要使用唯一鍵值來做標記，例如id。

如果我們使用id做key在我們渲染到頁面的時候變成

<ul>

li key:201401 ,id:201401,name:chen

li key:201402 ,id:201402,name:sun

li key:201403 ,id:201403,name:wang

</ul>

如果我們要在中間插入一條數組{id:201404,name:zhou}

<ul>

li key:201401 ，id:201401,name:chen

li key:201404 ，id:201404,name:wang

li key:201402 , id:201402,name:sun

li key:201403 , id:201403,name:wang

</ul>

因爲我們是已id爲key值，所以當我們向數組中間插入一個新的數據，diff算法發現原本的三個<li>的key值沒改變，只是在中間加入了一個新的元素，原本的三個<li>得到了複用這也就利用了虛擬dom在性能上的優勢