vue2-vue中key的原理

vue中key是什么?它有什么作用?原理是什么?
1、key是什么?
先考虑两个实际场景
当我们使用v-for时,需要给单元加上key
在这里插入图片描述
用+new Date()生成的时间戳作为key,手动强制触发重新渲染。
在这里插入图片描述
在上面两种场景中,key的作用是:
key是给每一个vnode的唯一id,也是diff的一种优化策略,可以根据key,更快,更准确的找到对应vnode节点

场景背后的逻辑:
当我们在使用v-for的时候,需要给单元加上key
如果不使用key,Vue会采用旧地复地原则:最小化element的移动,并且会尝试最大程度在同适当的地方对相同类型的element,做patch或resue
如果使用了key,Vue会根据keys的顺序记录element,曾经拥有了key的element如果不再出现的话,会被直接remove或者destroy

用+new Data()生成的时间戳作为key,手动强制触发重新渲染
当拥有新值的rerender作为key时,拥有了新key的Comp出现了,那么旧的key Comp就会被移除,新key Comp触发渲染

2、设置key与不设置key的区别
举个例子:创

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值