V-for中 key 值的作用，如何选择key

key 是 v-for 指令中的一个重要属性，它用于识别节点的标识，从而能更高效地更新虚拟 DOM 中的节点。通常情况下，在 v-for 中使用 key 可以开启 Vue 的性能优化，提高渲染的效率。

当 Vue 重新渲染节点时，它会比较新旧两个节点的 key 值，如果相同则表示这个节点没有发生变化，可以直接复用老节点的状态，省去创建和销毁节点的过程。如果 key 值不同，则会按照一般的创建、销毁流程重新渲染节点。

在选择 key 值时，应该注意以下几点：

1. 每个节点的 key 值应当是唯一的，不能重复。
2. key 值应当基于数据的唯一标识，例如数据中的 id 字段等。这样做可以防止出现类似“删除第一个元素后，第二个元素变成了第一个元素”的问题。
3. 如果无法确定数据的唯一标识，可以考虑使用节点索引作为 key 值（如 :key="index"），但这通常不是最优的选择，可能导致渲染效率下降。

下面是一个简单的示例，演示如何在 v-for 中使用 key 属性：

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

在上面的代码中，我们将 v-for 循环的每个元素都添加了一个 key 属性，并将其值设置为对应数据中的 id 字段。这样可以确保每个节点的 key 值唯一，提高渲染效率。