Vue采用异步批量更新机制，响应式数据变更立即同步生效，DOM更新延迟至微任务队列执行，通过虚拟DOM比对与最小化操作确保高效且一致的视图渲染。
Vue 的响应式数据更新后，DOM 视图不会立刻同步，但能保证最终一致——关键在于它用异步批量更新机制替代了“即时 DOM 操作”，既避免重复渲染开销，又确保状态与界面严格对齐。
响应式数据变更立即生效
当你执行 this.count++ 或 ref.value = 5，JavaScript 层的数据值瞬间改变。getter/setter 或 Proxy 拦截器立刻捕获这次赋值，触发依赖通知流程。此时组件内部的计算属性、watch 监听器、模板插值表达式所依赖的值，全部已更新为最新状态。
- 数据层变更不等待 DOM，是同步且确定的
- 所有依赖该数据的 Watcher 被标记为“待刷新”，但不会马上执行 render
- 同一事件循环中多次修改同一响应式字段，只触发一次更新任务
虚拟 DOM 渲染在下一个微任务执行
被标记的 Watcher 不会立刻重绘，而是统一排队到 microtask 队列（如 Promise.then），等当前同步代码执行完、浏览器进入渲染前的空闲时机再批量处理。
- 调用组件 render 函数，生成一棵全新的 VNode 树（纯 JS 对象，无 DOM 开销）
- 若使用
v-for，稳定key可复用节点；静态内容会被标记为static，跳过 diff - 整个过程不操作真实 DOM，只是构建内存中的结构描述
Diff 算法精准定位最小变更集
新旧 VNode 树进入 patch 阶段，通过同层 key 对比 + 深度优先遍历，识别出真正需要增删改的节点范围。
立即学习“前端免费学习笔记（深入）”；
- 文本节点仅比对
text字段；元素节点对比 props、class、style、子节点结构 - 相同 key 且同类型节点，优先复用并更新属性/事件，而非销毁重建
- 类型不同时（如
div→span），整节点替换，不递归 diff
真实 DOM 更新批量提交，保障视觉一致性
patch 产出的操作指令（如 setAttribute、appendChild、removeChild）被合并执行，一次性应用到真实 DOM。
- 避免单次更新引发多次重排（reflow）或重绘（repaint）
- 浏览器在本次更新完成后才进行像素绘制，用户看到的是完整、连贯的新视图
- 若需在 DOM 更新后读取尺寸或焦点状态，必须用
nextTick或await nextTick()
