key 是 v-for 的硬性要求，必须为稳定唯一的字符串或数字，优先用数据 ID；禁用 index、Math.random() 等不稳定的 key；数组用 item.id，对象用 key，数字遍历用 n；key 必须绑定在 v-for 标签上，嵌套结构需每层独立设置。
key 不是可选项，而是 v-for 的硬性要求。它直接决定 Vue 能否正确追踪节点、复用 DOM、维持状态。写错或漏掉 key，轻则输入框内容跳变、选中状态错位，重则组件反复重建、控制台持续报错、动画完全失效。
key 必须稳定唯一，优先用数据 ID
key 的本质是虚拟节点的“身份证”。Vue 依赖它做 diff 对比，必须满足三个条件：字符串或数字类型、同一父级下唯一、值本身不随渲染变化。
- ✅ 推荐写法：
:key="item.id"——后端返回的主键、UUID 或业务唯一标识最可靠 - ❌ 禁用
:key="index"——列表增删、排序、过滤后索引重排，“第2个”可能变成“第1个”，Vue 把旧项误当新项复用 - ❌ 禁用
:key="Math.random()"或:key="Date.now()"——每次 key 都不同，Vue 强制销毁重建全部节点，表单清空、过渡重播、性能骤降
不同数据源的 key 写法要区分
遍历对象、数组、数字时，key 的来源和构造逻辑不同，不能一概而论。
- 数组遍历：
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 位置不能错
key 必须绑定在 v-for 所在的标签上，而不是子元素或组件内部；多层嵌套时，每层都要独立设 key。
立即学习“前端免费学习笔记（深入）”；
- 自定义组件必须把 key 写在组件标签上：
<user-card v-for="u in users" :key="u.id" />，而非组件内部某个 div 里 - 树形菜单或评论嵌套：父级用
:key="comment.id"，子评论用:key="sub.id + '-' + comment.id"，避免仅用sub.id导致跨层级重复 - 模板语法中使用
<template v-for>：key 必须写在<template>标签上，如<template v-for="i in list" :key="i.id">
没有真实 ID 时，前端打标要一次且恒定
后端未提供稳定 ID 时，不能每次响应式更新都生成新 key，否则等于没设。
- 首次加载数据后，用
crypto.randomUUID()或nanoid()为每项一次性添加临时 ID，并存入响应式数据（如item.tempId = nanoid()） - 组合字段生成 key 时确保全局唯一，例如
:key="item.email + '-' + item.createdAt"；但应推动后端补全真实 ID，长期依赖组合 key 易出错 - 避免用
Symbol()或index + timestamp——前者非字符串，Vue 会警告；后者 timestamp 可能重复
