Vue报错之(Emitted value instead of an instance of Error) Do not use v-for index as key 吧啦吧啦全身变

众所周知,在Vue中使用列表渲染需要加上key值作为每一个子元素的唯一索引。

至于为什么是众所周知，请移步我另一篇文章https://blog.csdn.net/qq_38280242/article/details/102992064

原来这样使用没有问题，当我给列表渲染组件加上了动画效果时出现了如下报错

Do not use v-for index as key

查阅资料

报错的意思是：在<transition-group>子元素上，不要使用索引作为key的值，否则相当于没有使用key。

不用index作为v-for的值。，但是key又必须是唯一的才能确定子组件的唯一性。

那么我就在列表渲染的所有数据中加上了唯一的id值。

v-for的值设为:key=''item.id''。这样既解决了key的唯一性问题，又确保了key的值不为index

关于数据方面是否有唯一的id值。根据我常年白嫖网上免费的api接口可以确定。

数据应该是有唯一id值的。所以我认为这种解决方法是我觉得最好的。

对了 之前查阅资料看到网上有人这样解决问题

v-for:='(item,idx) in arrlist' :key='idx'

我当时就想着，这样设置的idx本质上不还是index吗。我照着改之后果然报错了。很好奇那位同学是怎么通过改index的变量名来解决这个报错的。

究其所以然看了一下differ算法。算法是弱项，总结了一下，算法特点主要有两个，

同级比较和就近更新

也就是大多数博客中都提到的就地更新。给v-for渲染出来的每一个子标签加上一个唯一的标识符后有利于高效构建虚拟dom树。

翻阅资料发现一个重点（key值是唯一且不可变的。否则无效。所以说使用index和Math.random标识的index都是无效的）

有同孩会问为什么index也会变。因为v-for渲染出的子元素如果增加或减少index就会变化了嘛！