如何利用虚拟 DOM 实现无痕刷新？基于 VNode 对比的状态保持技巧

无痕刷新依靠虚拟 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 或受控组件，让框架统一管理避免触发强制重置的更新模式某些写法会让框架认为“整个子树已失效”，放弃复用而清空重建。 通义听悟 阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。