“就地复用”导致状态不更新，是因为类型相同时框架复用旧实例而不重置内部状态；需用唯一key强制新建实例，并在组件内通过watch或useeffect响应props变化。
虚拟 DOM 的“就地复用”策略，是指在 diff 过程中，当新旧 vnode 类型相同（比如同为 <div>、同为同一个组件构造函数），Vue 或 React 会默认复用已有的真实 DOM 节点或组件实例，而不是销毁重建。这个策略提升了性能，但也是组件状态“看似没更新”的常见根源。
<h3>为什么“就地复用”会导致状态不更新？</h3>
<p>复用的前提是“类型相同”，但开发者常忽略：组件是否真的“该被复用”。典型场景包括：</p>
<ul>
<li>用同一个组件标签渲染不同业务数据（比如 <code><usercard :id="userId"></usercard>，但 userId 变了，组件却没响应式重载）
key，导致 Vue 复用了旧实例（内部 data、watch、computed 全部沿用）v-memo 或 React.memo）关键破局点：用 key 强制中断复用
key 是 Vue/React 识别节点身份的唯一标识。只要 key 改变，框架就会抛弃旧 vnode，创建全新的组件实例 —— 这是最直接、最可控的“避坑手段”。
- 对列表项，永远用稳定唯一的 id 作为 key（不用 index）
- 对条件切换的组件，把业务标识（如模块名、tabId、资源 ID）拼进 key：
:key="'user-' + userId" - 需要完全重置表单或内部状态时，主动更新 key（例如点击“重置”后
resetKey++）
组件内部也要配合：正确响应 props 变化
即使复用了实例，组件也应感知关键 props 变更并同步自身状态。不能只依赖 created/mounted 初始化一次。
- Vue 中使用
watch监听 prop 变化，必要时调用 reset 方法 - React 中用
useEffect依赖 props 重新计算或清空内部 state - 避免在 data() 或 useState 初始化时“快照”props 值；改用 computed 或 useMemo 派生
调试技巧：一眼识别是否被复用
打开浏览器开发者工具，观察元素上是否有重复的 Vue 组件标记（如 data-v-xxxx）或 React 的 __reactInternalInstance$xxx；再对比控制台打印的组件生命周期钩子（如 mounted 是否只执行一次）。更直观的是在 beforeDestroy 或 useEffect cleanup 打印日志 —— 如果没触发，大概率被复用了。
就地复用不是 bug，而是设计权衡。理解它，才能在性能和可预测性之间拿捏得当。
