单向数据流框架本身不直接导致DOM脱离，但状态更新与DOM生命周期错位会引发节点残留、引用悬空等问题，根源在于卸载时未切断JS引用链，如React中useRef未清理、Vue中onUnmounted遗漏observer.disconnect、Svelte中bind:this未在onDestroy置null，以及第三方库未调用dispose等。

单向数据流框架（如 React、Vue 3 的 Composition API、Svelte）本身不会直接导致 HTML 文档结构脱离，但当状态更新与 DOM 生命周期错位时，会引发节点残留、引用悬空、重复挂载等现象——这些才是内存持续上涨的真正源头。

为什么 setState 或 ref.value 更新后 DOM 看似“消失”却还在吃内存

这不是渲染失败，而是框架卸载节点时未切断 JS 引用链。典型表现是：组件 unmount 后，DevTools Memory 面板仍显示大量 detached div、span 节点，且 Retainers 指向闭包或全局 Map。

• React 中使用 useRef 保存 DOM 节点但没在 useEffect 清理函数中置为 null
• Vue 使用 onUnmounted 却忘了调用 observer.disconnect() 或清空 setTimeout 句柄
• Svelte 绑定 bind:this={node} 后未在 onDestroy 中手动 node = null
• 第三方库（如 Monaco Editor、Chart.js）内部 retain 了已卸载容器的引用，而你没调用其 dispose() 方法

innerHTML 直接赋值在单向流里为何比虚拟 DOM 更危险

框架接管 DOM 更新逻辑后，绕过它直接操作 innerHTML 会破坏 reconciliation 流程，导致旧节点无法被正确标记为“可回收”，尤其在条件渲染分支中极易产生悬挂节点。

React Best Practices 2 0.1.0

React 与 Next.js 性能优化指南，源自 Vercel 工程团队。适用于编写、审查或重构 React/Next.js 代码时使用。

下载

• 在 React 中写 ref.current.innerHTML = htmlStr，等于跳过 Fiber 树调度，后续 diff 不再追踪这些节点
• Vue 模板里混用 v-html 和响应式绑定，一旦响应式属性更新，v-html 插入的内容不会被自动清理
• 所有通过 innerHTML 插入的节点，若含内联事件（onclick="handler()"）或 script 标签，还会额外创建不可控闭包和执行上下文
• 安全替代方案：用 createPortal（React）、render 函数（Vue）或 {@html} + 手动生命周期管理（Svelte）

如何判断是框架 bug 还是你的误用

先排除自身代码，再怀疑框架。真实项目中 95% 的“文档结构脱离”都源于未对齐生命周期。

立即学习“前端免费学习笔记（深入）”；

• 复现路径必须包含完整 mount → update → unmount 循环，且每次 unmount 后强制触发一次 GC（DevTools → Memory → Collect garbage）
• 对比 Heap Snapshot：如果 Detached DOM tree 数量随循环次数线性增长，问题一定出在你的清理逻辑漏掉某条引用路径
• 检查是否用了非标准 API：比如 React 中用 findDOMNode（已废弃）、Vue 中直接修改 vm.$el、Svelte 中用 document.querySelector 获取并缓存节点
• 禁用所有第三方 UI 库，只留最小骨架组件测试；若内存稳定，则问题在集成层而非框架核心

最易被忽略的是：框架的“无感卸载”不等于 JS 对象销毁。哪怕你什么都没写，只要存在一个闭包捕获了旧组件实例，整个子树就锁死在内存里——查 Retainers 比看代码更准。