为什么vue中的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在性能上的优势