Vue的遍历中Key的作用

Vue的遍历中Key的作用

在Vue的遍历过程中,是否一定要增加Key属性?

1.没有状态组件时,没有key的渲染速度更快!

官方文档里有一句话:“建议尽可能在使用 v-for 时提供 key,除非遍历输出的 DOM 内容非常简单,或者是刻意依赖默认行为以获取性能上的提升。”

因为在没有key的时候,Vue通过diff的交叉比对中,没有key的遍历采用的是原地复用的方式,不需要判断比对前后Key对应的值是否发生变化,并做销毁创造节点的动作;

<ul>
    <li v-for="item in items">{{item}}</li>
</ul>

2.有状态组件时,有唯一key的数据发生更新,会强制更新组件,避免原地复用的副作用

diff函数中,带有key的使用的是map映射的方式,而没有key的则使用遍历的方式.在性能上,map的性能要比遍历的性能好!

key的作用就是更新组件时,判断是否相同节点(sameVnode),相同节点时就复用,不相同就销毁重新创建新的dom节点;

正是因为带唯一Key时每次更新都不能找到可复用的节点,所以要不断地销毁oldVnode以及创建新的newVnode,这一点对性能影响较大!所以才有文档说的 dom节点比较简单时,不带ke能性能会更好

<ul>
    <li v-for="item in items" key="item.id">{{item.title}}</li>
</ul>

 

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值