“就地复用”导致状态不更新，是因为类型相同时框架复用旧实例而不重置内部状态；需用唯一key强制新建实例，并在组件内通过watch或useEffect响应props变化。
虚拟 DOM 的“就地复用”策略，是指在 diff 过程中，当新旧 vnode 类型相同（比如同为 <div>、同为同一个组件构造函数），Vue 或 React 会默认复用已有的真实 DOM 节点或组件实例，而不是销毁重建。这个策略提升了性能，但也是组件状态“看似没更新”的常见根源。
为什么“就地复用”会导致状态不更新？
复用的前提是“类型相同”，但开发者常忽略：组件是否真的“该被复用”。典型场景包括：
- 用同一个组件标签渲染不同业务数据（比如
<UserCard :id="userId" />，但userId变了，组件却没响应式重载） - 动态切换组件但未改变
key，导致 Vue 复用了旧实例（内部 data、watch、computed 全部沿用） - 函数式组件或无状态组件被缓存，props 更新但未触发重新渲染逻辑（尤其配合
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，而是设计权衡。理解它，才能在性能和可预测性之间拿捏得当。
