vue组件更新采用异步批处理机制，将同一事件循环内的多次数据变更压缩为一次render+patch；通过微任务（promise.then或queuemicrotask）延迟执行，确保dom一次性更新，避免闪烁与重复layout。
Vue.js 组件更新不会随每次数据变化立刻执行，而是统一收口到一个异步批处理流程中——核心目标是把同一事件循环内多次状态变更，压缩成一次完整的 render + patch。
批处理的触发入口：数据变更是起点，不是终点
当你修改响应式数据（比如 ref.value++ 或 this.count = 5），Vue 并不马上重绘。它只做两件事：标记依赖该数据的组件为“待更新”，并把对应的更新任务（如组件的 render watcher）加入调度队列。
- 同一个组件在本轮中被多次标记，只会保留最后一次任务（靠 id 去重）
- 父子组件同时受影响时，父组件任务排在子组件前面，避免状态错乱
- 这个队列不是立即执行，而是等待当前同步代码全部跑完
异步执行的关键：微任务驱动的统一刷新
Vue 利用 Promise.then 或 queueMicrotask（Vue 3）把队列刷新逻辑推入微任务队列。这意味着：
- 所有同步代码（包括连续赋值、方法调用）执行完毕后，才开始批量处理更新
- DOM 更新发生在浏览器重绘之前，避免视觉闪烁或重复 layout
- 你写的多个 nextTick 回调，会和本次 patch 同批执行，且自动去重
更新阶段的三段式执行：pre → render → post
真正执行时，Vue 不是简单地逐个组件 patch，而是分层调度：
- pre 队列：先运行 watch、computed 的副作用清理与重新求值
- render + patch：按排序顺序执行组件 render 函数，生成新 vnode，再 diff + 更新真实 DOM
- post 队列：最后运行用户注册的 onScopeDispose、onUnmounted 等清理逻辑
为什么你感觉不到“多次更新”？
因为从你改数据，到页面最终呈现，中间经历了完整闭环：
- setter 触发依赖通知 → watcher 入队
- 微任务清空队列 → 执行 flushJobs
- 先 pre、再 render、最后 post → DOM 一次性到位
- 生命周期钩子（beforeUpdate / updated）也严格嵌套在这个流程里
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
