Vue基础语法如何在循环中使用 index 索引与唯一标识

不推荐使用 index 作为 v-for 的 key，因其不稳定，易导致状态错乱、DOM 复用错误和性能下降；应优先使用 item.id 等唯一标识符作为 key，index 仅用于展示或逻辑判断。

在 Vue 中，v-for 是处理列表渲染的核心指令，而 index 和唯一标识（如 id）分别承担不同角色：前者用于获取位置信息，后者用于稳定追踪节点。二者常一起用，但目的和风险完全不同。

v-for 中正确获取和使用 index

index 是遍历时自动提供的当前项下标（从 0 开始），它不是必须写，但需要时可显式解构：

1. 语法格式为 v-for="(item, index) in list"，其中 index 是第二个参数，顺序不能颠倒
2. 可用于显示序号、条件判断（如首项加样式）、或传给子组件作辅助信息，但不能作为 key 的值
3. 注意：index 是只读的，在模板中直接修改它无效；若需带偏移（如从 1 开始编号），写成 {{ index + 1 }} 即可

为什么唯一标识更适合当 key

key 是 Vue 虚拟 DOM diff 算法的关键依据，必须满足“稳定、唯一、可预测”：

1. 数组项若有自然唯一字段（如 user.id、post.slug），就该优先用它：:key="item.id"
2. 若数据本身无 ID（比如纯字符串数组 ['a','b','c']），且确定不会增删/排序，才可退而求其次用 :key="index"
3. 用 index 当 key 的典型问题：插入新项、删除中间项、或拖拽重排时，Vue 会复用旧节点，导致表单内容错位、状态丢失、动画异常

实际搭配写法示例

一个常见场景：渲染用户列表，既要显示序号，又要保证 key 可靠：

<ul><li v-for="(user, index) in users" :key="user.id" :class="{ 'first': index === 0 }">{{ index + 1 }}. {{ user.name }} — ID: {{ user.id }}</li></ul>

这里 index 仅用于展示和样式控制，key 始终绑定 user.id，分工清晰，安全高效。

没有唯一 ID 怎么办

如果后端返回的数据确实缺少唯一字段，不要硬造 index，可考虑：

1. 前端临时生成唯一 key（如用 crypto.randomUUID() 或时间戳+序号拼接），并在添加数据时一并存入
2. 用 JSON.stringify(item) 作 key（仅限简单不可变对象，且确保结构完全一致）
3. 配合 provide/inject 或全局计数器生成递增 ID（适合本地临时列表）