uniapp 时而出现一会又不出现 Duplicate keys detected: '2'. This may cause an update error.

129 阅读1分钟

uniapp 时而出现一会又不出现 Duplicate keys detected: '2'. This may cause an update error.

出现原因 通常表示在v-for指令中使的:key绑定值有重复。 又或者是数据渲染造成的问题

解决办法

与后端开发者合作时,确保他们返回的数据中的某个值是唯一的,在绑定到key上。

如果不需要对该数据做操作,可以用index做key值。 如果要对该数据做操作,不可以用index做key值。像数组,使用index作为 key和没写基本上没区别,因为不管数组的顺序怎么颠倒,index都是0,1,⒉.这样排列,导致Vue 会复用错误的旧子节点,做很多额外的工作。

可以使用组件键来保证key的唯一性,比如

例:<view v-for="(item,index) in list" :key="unique-index{index}-{item.id}"> </view>

总结

v-for中使用key作用是为了高效的更新渲染虚拟DOM。
Vue 使用一个基于虚拟 DOM 的高效更新算法(称为“就地更新策略”),来尽可能复用 DOM 元素以减少不必要的性能开销。当列表的数据发生变化时,Vue 会尝试通过改变 DOM 的最小量来更新视图。