*vue v-for中 key 值的作用—key不能用index的值*

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了*vue v-for中 key 值的作用—key不能用index的值*相关的知识,希望对你有一定的参考价值。

参考技术A

上面这种是我们做项目中常用到的一种场景,因为不加key,vue现在直接报错,所以我使用index作为key;下面列举两种常见的数据更新情况

此时前三条数据直接复用之前的,新渲染最后一条数据,此时用index作为key,没有任何问题;

此时更新渲染数据,通过index定义的key去进行前后数据的对比,发现

通过上面清晰的对比,发现除了第一个数据可以复用之前的之外,另外三条数据都需要重新渲染;

现在对比发现只有一条数据变化了,就是id为4的那条,因此只要新渲染着一条数据就可以了,其他都是复用之前的

以上是关于*vue v-for中 key 值的作用—key不能用index的值*的主要内容,如果未能解决你的问题,请参考以下文章

Vue中key值的作用

vue v-for 遍历循环时的key值的报错

虚拟DOM中key值的作用

v-for中key的作用

图解vue中 v-for 的 :key 的作用,虚拟dom Diff算法

Vue3 v-for中无key和有key实现的简单解读