Vue3:v-for中,key的作用

只要思想不滑坡,方法总比困难多。

这不,Vue3来了,在重温Vue的过程中,发现自己对key的作用不了解,字面理解肯定是索引顺序的作用,但是我发现我改了数据后,排序没发生变化,才知道我一直以来的理解是错误的。

key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度

vue中循环需加:key=“唯一标识” ,唯一标识可以使item里面id index 等,因为vue组件高度复用增加key可以标识组件的唯一性,为了更好地区别各个组件key的作用主要是为了高效的更新虚拟DOM

不带有key,并且使用简单的模板,基于这个前提下,可以更有效的复用节点,diff速度来看也是不带key更加快速的,因为带key在增删节点上有耗时。这就是vue文档所说的默认模式。但是这个并不是key作用,而是没有key的情况下可以对节点就地复用,提高性能。这种模式会带来一些隐藏的副作用,比如可能不会产生过渡效果,或者在某些节点有绑定数据(表单)状态,会出现状态错位。vue文档也说明了。还有就是key的作用是为了在diff算法执行时更快的找到对应的节点,提高diff速度,但是这个含有争议。

本文系作者 @ 原创发布在 徐小鹏的个人分享博客。未经许可,禁止转载。

喜欢()
评论 (0)
21 文章
7 评论
1 喜欢
Top