为何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在性能上的优点