Vue.js 列表渲染指令 v-for 的 key 属性优化与实战-Vue.js-PHP中文网

key 是 v-for 的硬性要求，必须为稳定唯一的字符串或数字，优先用数据 id；禁用 index、math.random() 等不稳定的 key；数组用 item.id，对象用 key，数字遍历用 n；key 必须绑定在 v-for 标签上，嵌套结构需每层独立设置。

vue.js 列表渲染指令 v-for 的 key 属性优化与实战

key 不是可选项，而是 v-for 的硬性要求。它直接决定 Vue 能否正确追踪节点、复用 DOM、维持状态。写错或漏掉 key，轻则输入框内容跳变、选中状态错位，重则组件反复重建、控制台持续报错、动画完全失效。

key 的本质是虚拟节点的“身份证”。Vue 依赖它做 diff 对比，必须满足三个条件：字符串或数字类型、同一父级下唯一、值本身不随渲染变化。

✅ 推荐写法：:key="item.id"——后端返回的主键、UUID 或业务唯一标识最可靠
❌ 禁用 :key="index"——列表增删、排序、过滤后索引重排，“第2个”可能变成“第1个”，Vue 把旧项误当新项复用
❌ 禁用 :key="Math.random()" 或 :key="Date.now()"——每次 key 都不同，Vue 强制销毁重建全部节点，表单清空、过渡重播、性能骤降

遍历对象、数组、数字时，key 的来源和构造逻辑不同，不能一概而论。

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

数组遍历：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。

自定义组件必须把 key 写在组件标签上：<user-card v-for="u in users" :key="u.id"></user-card>，而非组件内部某个 div 里
树形菜单或评论嵌套：父级用 :key="comment.id"，子评论用 :key="sub.id + '-' + comment.id"，避免仅用 sub.id 导致跨层级重复
模板语法中使用 <template v-for></template>：key 必须写在 <template></template> 标签上，如 <template v-for="i in list" :key="i.id"></template>

后端未提供稳定 ID 时，不能每次响应式更新都生成新 key，否则等于没设。

首次加载数据后，用 crypto.randomUUID() 或 nanoid() 为每项一次性添加临时 ID，并存入响应式数据（如 item.tempId = nanoid()）
组合字段生成 key 时确保全局唯一，例如 :key="item.email + '-' + item.createdAt"；但应推动后端补全真实 ID，长期依赖组合 key 易出错
避免用 Symbol() 或 index + timestamp——前者非字符串，Vue 会警告；后者 timestamp 可能重复

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索前端的入门与实战技巧！