不推荐使用 index 作为 v-for 的 key，因其不稳定，易导致状态错乱、DOM 复用错误和性能下降；应优先使用 item.id 等唯一标识符作为 key，index 仅用于展示或逻辑判断。
在 Vue 中，v-for 是处理列表渲染的核心指令，而 index 和唯一标识（如 id）分别承担不同角色：前者用于获取位置信息，后者用于稳定追踪节点。二者常一起用，但目的和风险完全不同。
v-for 中正确获取和使用 index
index 是遍历时自动提供的当前项下标（从 0 开始），它不是必须写，但需要时可显式解构：
- 语法格式为
v-for="(item, index) in list"，其中index是第二个参数，顺序不能颠倒 - 可用于显示序号、条件判断（如首项加样式）、或传给子组件作辅助信息，但不能作为 key 的值
- 注意：index 是只读的，在模板中直接修改它无效；若需带偏移（如从 1 开始编号），写成
{{ index + 1 }}即可
为什么唯一标识更适合当 key
key 是 Vue 虚拟 DOM diff 算法的关键依据，必须满足“稳定、唯一、可预测”：
- 数组项若有自然唯一字段（如
user.id、post.slug），就该优先用它：:key="item.id" - 若数据本身无 ID（比如纯字符串数组
['a','b','c']），且确定不会增删/排序，才可退而求其次用:key="index" - 用 index 当 key 的典型问题：插入新项、删除中间项、或拖拽重排时，Vue 会复用旧节点，导致表单内容错位、状态丢失、动画异常
实际搭配写法示例
一个常见场景：渲染用户列表，既要显示序号，又要保证 key 可靠：
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
<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，可考虑：
- 前端临时生成唯一 key（如用
crypto.randomUUID()或时间戳+序号拼接），并在添加数据时一并存入 - 用
JSON.stringify(item)作 key（仅限简单不可变对象，且确保结构完全一致） - 配合
provide/inject或全局计数器生成递增 ID（适合本地临时列表）
