微信小程序报错：": component lists rendered with v-for should have explicit keys."

今天有朋友突然问到一个关于uniapp小程序开发的问题，当我们在uniapp里操作微信小程序打开项目的时候，突然发现有这样的错误提示：

(Emitted value instead of an instance of Error) <block v-for="list in nowImage">: component lists rendered with v-for should have explicit keys. See https://vuejs.org/guide/list.html#key for more info.

这个问题很简单，其实从提示中科院看出，你没有设置key。

解析

当 Vue 更新使用 渲染的元素列表时v-for，默认情况下它使用“就地补丁”策略。如果数据项的顺序发生变化，Vue 不会移动 DOM 元素以匹配项的顺序，而是会就地修补每个元素并确保它反映应该在该特定索引处呈现的内容。这类似于track-by="$index"Vue 1.x 中的行为。

这种默认模式是高效的，但仅适用于您的列表渲染输出不依赖于子组件状态或临时 DOM 状态（例如表单输入值）的情况。

要给 Vue 一个提示，以便它可以跟踪每个节点的身份，从而重用和重新排序现有元素，您需要key为每个项目提供一个唯一的属性：

<div v-for="item in items" v-bind:key="item.id">
  <!-- content -->
</div>

建议尽可能提供key属性 with v-for，除非迭代的 DOM 内容很简单，或者您有意依赖默认行为来提高性能。

由于它是 Vue 识别节点的通用机制，因此它key还有其他与 无关的用途v-for，我们将在本指南后面部分看到。

不要使用非原始值（如对象和数组）作为v-for键。请改用字符串或数值。