单页应用框架通过声明式更新和受控dom操作抽象原生api；采用虚拟dom diff实现最小化更新；指令/jsx编译为具体dom行为；生命周期钩子封装dom访问时机；refs提供受控的底层dom访问通道。
单页应用（SPA）框架如 React、Vue、Angular 并不直接暴露原始 DOM 操作接口给开发者，而是通过抽象层间接控制 DOM，其核心思想是“声明式更新 + 有限且受控的 DOM 操作”。框架内部仍依赖原生 DOM API，但封装了更新时机、粒度、性能优化和副作用管理。
虚拟 DOM 与真实 DOM 的映射关系
React 和 Vue 3+ 使用虚拟 DOM（VNode）作为中间表示。框架在状态变化后先生成新的 VNode 树，再与旧树做 diff，仅对有差异的节点执行最小化 DOM 操作（如 createElement、appendChild、textContent =、setAttribute）。这种映射不是一一对应，而是按组件粒度批量提交，避免频繁重排重绘。
指令/JSX 编译为细粒度 DOM 操作
Vue 的 v-if、v-for 或 React 的条件渲染/列表映射，在编译或运行时被转为具体 DOM 行为：
- v-if → 对应 parentNode.removeChild() 或 parentNode.insertBefore()
- v-model → 绑定 input.addEventListener('input') 并同步设置 element.value
- JSX 中的 key → 影响 diff 算法判断节点复用，决定调用 replaceChild 还是就地更新
生命周期钩子封装 DOM 访问时机
框架将 DOM 可用性封装进特定钩子，避免开发者过早操作：
- Vue 的 onMounted → 确保组件首次渲染完成，el 已挂载到真实 DOM
- React 的 useEffect(() => { ... }, []) → 在 commit 阶段后同步执行，此时 DOM 已更新
- 所有框架都禁止在 render 函数中直接操作 DOM，防止破坏一致性与可预测性
Refs 提供受控的底层 DOM 访问通道
当必须绕过声明式逻辑（如聚焦输入框、测量尺寸、集成第三方库），框架提供 refs 机制：
- Vue 的 ref 指令或 template ref → 返回真实 DOM 元素或组件实例
- React 的 useRef + ref={myRef} → myRef.current 指向挂载后的 DOM 节点
- 该访问仍受限于框架生命周期：ref 在 mounted 后才有效，且不应在渲染中读写
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
