为 v-for 设置稳定唯一的 key 是保障列表行为正确的前提，必须用数据自身 ID（如 item.id），禁用 index 或随机值，且 key 必须绑定在 v-for 直接生成的节点上。
给 v-for 加上合适的 key 不是锦上添花，而是保障列表行为正确的前提。它直接决定 Vue 能否复用 DOM、维持输入状态、正确触发动画——写错或漏掉，轻则表单内容跳变，重则组件反复重建、控制台持续报错。
key 必须稳定唯一，优先用数据自身 ID
key 的本质是虚拟节点的“身份证”，Vue 依赖它做 diff 对比。必须满足三个条件：字符串或数字类型、同一父级下唯一、值本身不随渲染变化。
-
✅ 推荐写法：
:key="item.id"——后端返回的主键、UUID 或业务唯一标识最可靠 -
❌ 禁用写法：
:key="index"——列表增删或排序后索引重排，“第2个”可能变成“第1个”，Vue 把旧项误当新项复用 -
❌ 禁用写法：
:key="Math.random()"或:key="Date.now()"——每次 key 都不同，Vue 强制销毁重建全部节点，表单清空、过渡重播、性能骤降
不同数据源要区分 key 来源
遍历对象、数组、数字时，key 的构造逻辑不同，不能一概而论。
Vue Composition Analyzer
下载
分析 Vue 3 Composition API 使用情况——审计响应式模式、可组合函数设计、ref 与 reactive 的选择、计算属性、watcher 使用及组件……
-
数组遍历：
v-for="item in list"→:key="item.id"；即使带索引v-for="(item, i) in list"，仍用:key="item.id"，不是:key="i" -
对象遍历：
v-for="(value, key, index) in obj"→:key="key"（属性名本身稳定且唯一）；若属性名可能重复或不明确，改用:key="'obj-' + key" -
数字遍历：
v-for="n in 5"→:key="n"（n 是 1~5 的整数，天然唯一且稳定）
key 必须绑定在 v-for 所在标签上
key 不是“写了就行”，必须作用于 v-for 直接生成的那一层节点，否则 Vue 无法追踪该层级的更新。
立即学习“前端免费学习笔记（深入）”；
-
✅ 正确：
<UserItem v-for="u in users" :key="u.id" />或<template v-for="i in list" :key="i.id"><div>{{ i.name }}</div></template> -
❌ 错误：
<div v-for="i in list"><UserItem :key="i.id" /></div>——外层 div 没 key，Vue 无法追踪这一层 -
嵌套结构需分层设 key：树形菜单中，父级用
:key="comment.id"，子评论用:key="sub.id + '-' + comment.id"，避免仅用sub.id导致跨层级重复
没有真实 ID 时，前端打标要一次且恒定
后端未提供稳定 ID 时，不能每次响应式更新都生成新 key，否则等于没设。
- 首次加载数据后，用
crypto.randomUUID()或nanoid()为每项一次性添加临时 ID，并存入响应式数据（如item.tempId = nanoid()） - 组合字段生成 key 时确保全局唯一，例如
:key="item.name + '-' + item.email"或:key="item.category + '-' + item.createdAt"，拼接结果在当前列表中不可重复 - Tab 切换、搜索过滤等动态场景中，新旧列表的 key 规则必须一致，否则 Vue 会误判为全量替换，丢失过渡动画和表单状态
