为什么v-for中的key值不推荐使用index

首先我们举一个例子
我们现在有这个数组


  
  
  1. [
  2. {
  3. id:201401,
  4. name: 'chen'
  5. },
  6. {
  7. id:201402,
  8. name: 'sun'
  9. }, {
  10. id:201403,
  11. name: 'wang'
  12. },
  13. ]
  14. 复制代码
如果我们使用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在性能上的优势


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值