v-for 中 的key 使用不规范导致的问题纪要

问题:1、v-for 中 使用 索引index 作为 :key 时,容易出现变更数据时带来渲染冲突问题;

个人猜想:
当出现数据长度变动时,因采用索引作为key,容易出现 若原索引 0 的数据被删除,原索引1 的数据变更到原索引0的位置上,而此时vue 发现索引并没发生变更,只是索引少了最后一个,此时将导致原本出现在原索引0的渲染效果与从原索引1的数据变成索引0 后 的效果发生冲突。此问题尤其发生在 循环多个表单数据时,第一个表单发生了表单项校验,然后删除第一个表单时,第二个表单替换到表单1的位置上时,把原表单1的校验结果渲染到了替换过来的原表单2上。

个人结论:
在vue 中 进行v-for 循环渲染组件时,若数据可能存在实时变动,尽量保证使用每条数据固有的唯一键作为key,即使使用随机值出现每次变更 key 都不同(增加vue变动数据时渲染性能,但能保证数据被正确渲染),也不要考虑用 index 作为key。

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值