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）把队列刷新逻辑推入微任务队列。这意味着：

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

• 所有同步代码（包括连续赋值、方法调用）执行完毕后，才开始批量处理更新
• 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）也严格嵌套在这个流程里