v-for 在 vue 2 中必须配合 :key 使用，且 key 必须绑定在 v-for 所在标签上；遍历数组优先用 item.id 而非 index，对象遍历时用属性名 key，嵌套结构需构造复合 key 确保唯一。
v-for 在 Vue 2 中必须配合 :key 使用，否则容易出现输入框失焦、选中状态错乱、动画中断甚至控制台警告。key 不是可选项，尤其在组件中使用 v-for 时，Vue 2.2.0+ 已强制要求。
遍历数组：用 item.id，别用 index
后端返回的数据通常带 id、_id 或 UUID，这是最稳妥的 key 来源。即使你用索引渲染内容，key 仍要绑定真实 ID。
- ✅ 正确写法：
<li v-for="user in users" :key="user.id">{{ user.name }}</li> - ❌ 错误写法：
<li v-for="(user, i) in users" :key="i">{{ user.name }}</li>（增删或排序后索引偏移，Vue 会错误复用 DOM 节点） - ⚠️ 没有 ID？首次加载时用
nanoid()或crypto.randomUUID()生成唯一字符串，并存入响应式数据；后续更新不能重生成，否则 key 失去稳定性
遍历对象：直接用属性名 key
对象的键天然具备唯一性和稳定性，适合直接作为 key 值。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- ✅ 推荐写法：
<div v-for="(value, key) in userInfo" :key="key">{{ key }}: {{ value }}</div> - ⚠️ 若属性名可能重复（比如多个接口合并对象），加前缀避免冲突：
:key="'userInfo-' + key" - ❌ 不要用
:key="index"—— 对象属性顺序不保证，index 不稳定
key 必须写在 v-for 所在标签上
key 的作用是帮 Vue 区分节点身份，它必须绑定在被循环的元素或组件标签本身，不能放在内部子元素里。
- ✅ 组件场景：
<user-card v-for="u in users" :key="u.id"></user-card> - ❌ 错误写法：
<user-card v-for="u in users"><div :key="u.id">...</div></user-card> - ✅ 模板语法中用
<template v-for></template>，key 要写在<template></template>标签上：<template v-for="item in list" :key="item.id"></template>
嵌套结构：构造复合 key 确保全局唯一
树形菜单、评论回复等多层嵌套时，单靠子项 ID 不足以区分不同父级下的同 ID 子项。
- ✅ 父评论：
:key="comment.id" - ✅ 子评论：
:key="sub.id + '-' + comment.id"（拼接父级 ID，形成层级唯一标识） - ⚠️ 避免仅用
:key="sub.id"—— 同一页面多个列表或嵌套层级下容易重复
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
