vue2-vue中key的原理

最新推荐文章于 2024-07-12 21:59:54 发布

fakerlove

最新推荐文章于 2024-07-12 21:59:54 发布

阅读量372

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/fakerlove/article/details/132117311

版权

本文介绍了Vue中key的作用及其原理。key是用于唯一标识VNode的，有助于优化diff过程，减少DOM操作。不设置key时，Vue采用"就地复用"策略；设置key时，Vue会根据key值进行更精确的节点匹配。虽然设置key可能提高效率，但并非所有情况都适用，需根据实际情况权衡。

摘要由CSDN通过智能技术生成

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的