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

首先咱們舉一個例子 咱們如今有這個數組 [ { id:201401, name:'chen' }, { id:201402, name:'sun' }, { id:201403, name:'wang' }, ]

若是咱們使用index作key在咱們渲染到頁面的時候變成

li key:0 ，id:201401,name:chen li key:1 , id:201402,name:sun li key:2 , id:201403,name:wang

若是咱們要在中間插入一條數組{id:201404,name:zhou}

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

當咱們在中間插入新元素的時候 新元素的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在性能上的優點