文章目录前言一、key 是什么1.1 定义1.2 Diff 中的匹配规则二、v-for 中的 key2.1 正确用法2.2 Vue 3 要求 key2.3 无 key 时的行为三、index 作 key 的问题3.1 头部插入示例3.2 使用 id 作 key3.3 index 何时「看起来没问题」四、key 不稳定的问题4.1 Math.random()4.2 不稳定 key 的后果4.3 key 的要求五、强制重新渲染组件5.1 原理5.2 典型场景5.3 与 watch 对比六、key 的其他用法6.1 动态组件6.2 过渡动画6.3 条件渲染切换七、面试聚焦7.1 key 不稳定导致状态错乱7.2 为什么 Math.random() 不能做 key7.3 key 的作用仅是性能吗八、易混淆点九、思考与练习总结前言key是 Vue 列表渲染和组件切换中的重要属性帮助 Diff 算法识别节点身份决定 DOM 复用还是重建。本篇会讲清楚key 在 Diff 中的作用index 作 key 的问题强制重新渲染组件key 选型与常见陷阱一、key 是什么1.1 定义key是 Vue 为 VNode 提供的唯一标识用于在新旧节点比较时判断「是不是同一个节点」。ul li v-foritem in list :keyitem.id {{ item.name }} /li /ul1.2 Diff 中的匹配规则相同 type 相同 key → 认为是同一节点 → patch复用 DOM更新差异 相同 type 不同 key → 不同节点 → 销毁旧的创建新的 不同 type → 直接替换key 让 Diff 在列表乱序、增删时仍能正确对应节点而不是仅按索引顺序硬比。二、v-for 中的 key2.1 正确用法li v-foritem in list :keyitem.id {{ item.name }} /li使用稳定且唯一的业务 ID数据库 id、uuid 等列表增删改时节点身份不变。2.2 Vue 3 要求 keyVue 3 的v-for必须提供 key否则开发环境会警告。Vue 2 中 key 可选但生产环境仍强烈建议加上。2.3 无 key 时的行为未提供 key 时Vue 按索引顺序依次 patch新列表第 i 项与旧列表第 i 项比较。列表中间插入/删除时容易造成错误复用。三、index 作 key 的问题3.1 头部插入示例!-- ❌ 使用 index -- li v-for(item, index) in list :keyindex input v-modelitem.name / {{ item.name }} /li初始: [A, B, C] key0,1,2 头部插入 D: [D, A, B, C] Diff 按 index 匹配 key0: 旧 A → 新 D 复用 A 的 DOM内容变成 D输入框状态错乱 key1: 旧 B → 新 A key2: 旧 C → 新 B key3: 新增 C结果DOM 复用错误输入框内容错位组件内部状态混乱。3.2 使用 id 作 key!-- ✅ 使用唯一 id -- li v-foritem in list :keyitem.id input v-modelitem.name / /li插入 D 后 idd → 新建 D 的 DOM ida → patch A正确复用 idb → patch B idc → patch C只有新增项创建 DOM其余正确复用。3.3 index 何时「看起来没问题」场景index 作 key纯展示、无状态可能可用只有尾部追加通常正常有插入/删除/排序会出问题含输入框、checkbox 等会出问题结论无唯一 id 时应用组合字段或生成稳定 id不要图省事用 index。四、key 不稳定的问题4.1 Math.random()!-- ❌ 每次 render 新 key -- div v-foritem in list :keyMath.random()每次渲染 key 都变 → Diff 认为全是新节点 →销毁并重建所有 DOM性能差且状态全丢。4.2 不稳定 key 的后果不必要的 DOM 创建/销毁组件 state 丢失输入内容、滚动位置等过渡动画异常子组件生命周期反复 mounted/unmounted4.3 key 的要求要求说明唯一同一列表内不重复稳定同一数据项多次 render 间 key 不变可预测不用 random、Date.now() 等每次变化的值五、强制重新渲染组件5.1 原理同一组件类型key 变化时 Vue 视为不同实例销毁旧组件创建新组件。UserProfile :user-iduserId :keyuserId /userId从 1 变为 2 时组件完全重建内部 state 重置相当于「换了一个组件」。5.2 典型场景!-- 切换用户时重置表单 -- EditForm :keycurrentUserId :user-idcurrentUserId / !-- 路由同组件不同参数强制刷新 -- router-view :key$route.fullPath /5.3 与 watch 对比方式行为改 key销毁 重建state 全清watch route/ props复用实例手动重置数据需要「完全重来」用 key需要「保留部分状态」用 watch 更新。六、key 的其他用法6.1 动态组件component :iscurrentTab :keycurrentTab /切换 Tab 时 key 变化确保不同面板是独立实例配合 KeepAlive 时另说。6.2 过渡动画Transition namefade modeout-in component :isview :keyview / /Transitionkey 变化触发 leave enter 过渡无 key 时同组件可能不触发动画。6.3 条件渲染切换Transition div v-iftype A keyAA 内容/div div v-else keyBB 内容/div /TransitionA/B 切换时 key 不同正确触发过渡。七、面试聚焦7.1 key 不稳定导致状态错乱index 在增删时变化、random 每次变导致 Diff 错误复用 DOM输入框等内容错位。7.2 为什么 Math.random() 不能做 key每次 render 生成新 key所有节点被视为新节点全部重建无复用、无性能、状态丢失。7.3 key 的作用仅是性能吗不是。更重要的是正确性保证节点身份识别准确DOM 和组件状态正确复用。八、易混淆点key 给 VNode不是给 DOM attribute渲染到 HTML 的 key 属性是另一回事Vue 3 一般不输出。index 纯追加列表可能正常一旦有插入删除就会踩坑。强制刷新用 key改 key 比v-if切换更彻底重置组件。Vue 3 v-for 必须有 key遗漏会警告。key 唯一指同级列表不同 v-for 块之间 key 可重复但不推荐故意重复。九、思考与练习1.key 在 Diff 中的作用解析标识节点身份相同 type key 则 patch 复用不同则销毁重建。2.index 作 key 何时出问题解析列表有插入、删除、排序或项内有输入状态时索引重排导致错误复用。3.如何强制组件重新渲染解析改变组件上的:key为新的稳定值Vue 销毁旧实例并创建新实例。4.没有业务 id 怎么办解析组合多个字段生成稳定 key或后端补 id避免 index 和 random。5.key 与性能的关系解析稳定 key 减少不必要的 DOM 操作但首要目的是保证复用正确性不仅是性能优化。总结keyVNode 唯一标识Diff 匹配节点身份规则同级唯一、稳定、可预测推荐业务 id避免 index有增删时、Math.random()副作用改 key 可强制销毁重建组件场景v-for、动态组件、Transition、路由刷新