Vue节点复用需同时满足key相同且sameVnode为true，否则销毁重建；常见副作用包括状态残留、失焦等，可通过唯一key、业务key或重置key干预，复用本质是可控优化。
Vue.js 的节点复用逻辑本质是“能不重建就不重建”，靠 key 和 sameVnode 判断 一起决定是否复用旧 DOM 或组件实例。它带来性能提升，但也容易引发状态残留、输入框失焦、动画中断等副作用。关键不是禁用复用，而是理解它怎么工作、在哪儿该干预。
节点复用怎么判断？两个条件缺一不可
Vue 不会仅凭标签名或组件名就复用节点，必须同时满足：
- key 相同（且非 undefined/null）——这是身份锚点，没有 key 就退化为就地复用
- sameVnode(a, b) 返回 true —— 比较 tag、isComment、data 是否都存在/都不存在、input 类型是否一致等
只要其中一项不满足，Vue 就会销毁旧节点、新建新节点。比如 <input type="text"> → <input type="number">，即使 key 相同，也会被替换而非复用。
常见副作用场景与应对方式
复用本身没错，错在“复用了不该复用的实例”。典型问题和解法如下：
立即学习“前端免费学习笔记（深入）”；
-
列表项顺序变化后状态错乱：比如拖拽排序后，输入框内容跟着元素跑，但光标丢失。原因：没设 key 或 key 用 index。解法：用每项唯一 ID（如
:key="item.id"），让 Vue 正确识别移动而非就地替换 -
同一组件渲染不同数据时状态残留：如
<user-card :id="activeId">，切换 id 后内部 data、watch 未重置。解法：加业务 key，如:key="'user-' + activeId"，强制创建新实例；或在 props 变化时主动同步状态（用watch或onUpdated） -
表单重置失效：点击“重置”按钮后，输入框值清空但校验状态还在。解法：更新一个 resetKey，如
:key="resetKey"，再resetKey++，触发组件重建 -
动态组件切换无反应：用
<component :is="currentTab">切换时，内部状态未清理。解法：绑定 key，如:key="currentTab"或更细粒度的:key="currentTab + '-' + tabDataVersion"
如何验证是否被复用？三招快速定位
不必猜，直接看证据：
- 打开开发者工具，检查目标元素上的
data-v-xxxx属性 —— 如果切换前后 ID 不变，说明组件实例被复用了 - 在
beforeUnmount（Vue 3）或beforeDestroy（Vue 2）里加console.log('unmounted')—— 如果没打印，大概率被复用了 - 给组件加个唯一标识日志，比如在
setup开头打印Math.random()—— 多次渲染输出相同值，就是复用
复用不是 bug，是可控的优化手段
就地复用策略本身是为了避免频繁创建销毁开销。真正的问题在于开发者没意识到“类型相同”不等于“语义相同”。只要把 key 当作组件的“身份证”，而不是可有可无的属性，就能把复用从隐患变成利器。需要重置时给 key 加版本号，需要保留状态时让它自然复用 —— 控制权始终在你手里。
