vue不优化key，而是靠运行时正确使用key提升性能；key是diff算法锚点，必须唯一、稳定、绑定在v-for直接生成的节点上，优先用业务id，禁用index和动态值。
Vue 编译器本身不直接“优化” key，它只是严格校验和传递 key 的绑定；真正的性能提升来自运行时（runtime）对 key 的正确使用——key 是虚拟 DOM diff 算法的锚点，不是编译期魔法，而是你写对了，Vue 才能高效工作。
key 不是可选项，而是 DOM 更新的身份证
Vue 的 diff 算法默认采用“同层比对 + key 匹配”策略。没有 key 或 key 冲突时，Vue 只能按顺序逐个比对节点，一旦列表插入、删除或排序，后续所有节点都可能被误更新。加上合法 key 后，Vue 会建立 key → vnode 映射表，移动节点时直接复用对应 key 的旧实例，避免无谓重建。
- 输入框内容跳变、checkbox 状态错位、拖拽后图标闪烁——八成是 key 没写对
- 控制台出现
[Vue warn]: Duplicate keys detected或Missing required prop: "key"，说明问题已暴露，必须修正
怎么写 key 才算真正有效
key 必须是字符串或数字类型，同一父级下唯一，且生命周期内恒定不变。
-
✅ 优先用数据自身业务 ID：如
:key="user.id"、:key="post.uuid"，后端返回的主键最可靠 -
✅ 无 ID 时构造稳定组合：如
:key="item.name + '-' + item.email"或:key="item.category + '-' + item.createdAt"，确保拼接结果在当前列表中不重复 -
❌ 禁用 index：除非列表绝对只读、长度固定、永不增删/排序；否则
:key="index"会导致状态漂移 -
❌ 禁用动态值：如
:key="Math.random()"或:key="Date.now()"，每次渲染 key 都不同，Vue 强制全部销毁重建
key 必须落在正确位置
key 不是“写了就行”，必须绑定在 v-for 所在的真实元素或组件标签上。
-
✅ 正确：
<useritem v-for="u in users" :key="u.id"></useritem>或<template v-for="i in list" :key="i.id"><div>{{ i.name }}</div></template> -
❌ 错误：
<div v-for="i in list"><useritem :key="i.id"></useritem></div>—— 外层 div 没 key，Vue 无法追踪这一层 - 子组件内部写 key 没用，key 必须作用于 v-for 直接生成的那一层节点
嵌套与动态场景要分层设 key
树形结构、评论列表、Tab 切换等复杂场景，每层 v-for 都需独立、唯一的 key。
- 一级用
:key="comment.id"，子评论不能只用:key="sub.id"（测试数据易重复） - 稳妥做法：
:key="sub.id + '-' + sub.parentId"或:key="sub.id + '-' + i"（i 是该层级 v-for 的索引） - Tab 切换时，新旧列表 key 规则要一致，否则 Vue 会误判为全量替换，丢失过渡动画和表单状态
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
