虚拟 DOM 渲染本身不直接导致失焦，真正原因是输入框对应 DOM 节点被销毁重建，焦点无法自动继承；常见于 key 不稳定、父组件过度重渲染、受控组件逻辑不当等场景。

虚拟 DOM 渲染本身不会直接“导致”失焦，真正的问题是：当 Vue 或 React 重建某个输入框对应的 DOM 节点时，浏览器原有的焦点状态就断开了。焦点不是自动继承的，新节点默认无焦点——所以你刚敲一个字，光标就消失了。

关键原因：节点被重建，不是重用

输入框失焦的本质，是它所在的 DOM 元素被销毁、再新建。这通常发生在以下情况：

• v-for 或 map 渲染列表时，key 值不稳定或缺失（比如用 index 当 key，或 key 随输入内容变化）
• 父组件状态更新引发整块区域重渲染，而子组件未做隔离（如没用 React.memo 或 Vue 的 v-memo）
• 受控组件的 value 和 onChange 没配对好，或事件处理器在每次渲染中都生成新函数，间接触发无效更新
• 表单 submit 未调用 e.preventDefault()，导致页面刷新或组件卸载重挂载

Vue 场景：别让 key 成为“定时炸弹”

如果你用 v-for 渲染 el-input，且 key 绑定的是可能变化的字段（比如 :key="item.code"），那么用户一改 code，Vue 就认为这是个全新项，会卸载旧 input、挂载新 input——焦点必然丢失。

• ✅ 正确做法：key 应该是稳定、唯一、不随用户输入改变的标识，比如后端返回的 id 或前端生成的 Symbol()/uuid
• ✅ 进阶保护：对频繁编辑的字段（如 name/code），可拆出独立子组件，并用 defineOptions({ inheritAttrs: false }) + v-bind="$attrs" 避免属性透传引发不必要的响应式追踪

React 场景：避免“每次渲染都造新轮子”

React 中失焦常源于父组件重渲染波及了输入框。例如，把整个表格和搜索框放在同一个组件里，searchValue 一变，表格也跟着 rerender，input 就容易被替换。

• ✅ 把输入框抽成独立组件，并用 React.memo 包裹，props 不变就不重渲染
• ✅ onChange 处理器必须用 useCallback 缓存，否则每次父组件渲染都会传入新函数，打破 memo 的浅比较
• ✅ 不要用 useMemo 存 input 值——那是状态，该用 useState；useMemo 只缓存计算结果，不能替代受控逻辑

通用兜底技巧：用 ref 强行“抓回”焦点

当以上优化仍覆盖不到边缘场景（比如动态表单字段切换、条件渲染切换），可用 ref 主动管理焦点：

• Vue：用 ref 绑定 input 元素，在 nextTick 后调用 .focus()
• React：用 useRef 保存 input 实例，在 useEffect 或事件后调用 inputRef.current?.focus()
• 注意：这不是首选方案，而是补救手段。优先从 key、memo、受控逻辑等根本层面解决