无痕刷新依靠虚拟 DOM diff 算法精准复用节点并保留状态，关键在于稳定 key、不变更 type/name、手动恢复光标/滚动等原生状态，避免破坏性更新。
无痕刷新不是靠“隐藏 DOM”实现的，而是利用虚拟 DOM 的 diff 算法，在新旧 VNode 对比过程中保留关键状态（如输入框光标位置、滚动条偏移、组件内部数据），避免真实 DOM 重建带来的闪烁与失焦。核心在于控制 patch 过程中哪些节点复用、哪些属性保留、哪些状态不重置。
精准复用真实 DOM 节点
Vue/React 的 diff 默认会复用 key 相同的节点。但仅靠 key 不够——需确保同一位置的 VNode 类型、关键 props（如 id、name、type）未发生破坏性变更，否则会触发 replaceNode 而非 patch。
- 表单元素务必设置稳定且唯一的 key（例如
key="input-username"），避免用索引 - 不要在更新时动态改变 type（如从 text 切到 password），这会导致 input 元素被替换，丢失 focus 和 value
- 保持 name 属性不变，浏览器依赖它维持表单控件的关联状态（如 label for、表单序列化）
手动接管易丢失的状态
虚拟 DOM 不自动保存光标位置、滚动距离、选中文本等原生状态，需在 patch 前后主动读取与恢复。
- 对 input/textarea：在
beforeUpdate钩子中缓存selectionStart、selectionEnd和scrollTop；在updated后恢复 - 对可滚动容器：监听
scroll并暂存scrollTop/scrollLeft，diff 完成后异步恢复（用requestAnimationFrame避免布局抖动） - 避免在 render 中直接修改 DOM 属性（如
el.value = xxx），改用 v-model 或受控组件，让框架统一管理
避免触发强制重置的更新模式
某些写法会让框架认为“整个子树已失效”，放弃复用而清空重建。
- 不要在列表渲染中混用 v-if 和 v-for（尤其在外层包裹元素上），优先用 v-show 控制显隐
- 组件内部避免在
render函数里返回全新对象（如{...props, key: Math.random()}），导致 key 变更，节点无法复用 - 使用 keep-alive 缓存组件实例，对频繁切换但状态需保留的视图（如 Tab 页）最有效
定制 patch 行为（进阶）
Vue 3 的 renderer API 或 React 的 shouldComponentUpdate / memo 可精细控制比对粒度。
- 对静态内容区域，用 Fragment + key 或 memo 包裹，跳过 diff
- 自定义指令（Vue）或自定义 Hook（React）封装光标/滚动状态管理逻辑，降低业务组件侵入性
- 必要时用 ref 拿到真实 DOM，在
mounted和updated中做针对性修复（如 focus()、setSelectionRange）
不复杂但容易忽略：无痕刷新的本质是“让虚拟 DOM 认出这是同一个东西”，而不是强行阻止更新。重点始终是保持标识稳定性、接管原生状态、避开破坏性变更。
