Vue异步调度核心是微任务优先、队列去重、分层执行：更新任务入微任务队列，严格按pre→组件更新→post顺序执行，nextTick回调排在更新之后，降级策略仅兼容老旧环境。

Vue 渲染流程中异步任务的调度优先级，核心在于“微任务优先、队列去重、分层执行”。它不是简单按代码顺序排队，而是由框架主动控制执行时机与顺序，确保 DOM 更新高效且可预测。

微任务是默认首选通道

Vue 2/3 都把组件更新任务（如 queueJob）塞进微任务队列，优先使用 Promise.then 实现。这意味着：

• 更新逻辑会在当前同步代码执行完、浏览器渲染前立即运行
• 比 setTimeout 或 setImmediate 更快，避免 UI 卡顿
• 即使在同一个事件循环中多次修改响应式数据，也只触发一次 DOM patch

三种内部任务队列有明确执行次序

Vue3 调度器将副作用任务分为三类，执行时严格按 pre → 组件更新 → post 顺序：

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

• pre 队列：存放高优先级同步副作用，比如 watchEffect(flush: 'pre')，在 render 前执行
• 组件更新队列：主渲染流程，包括 render 和 patch，按组件 id 升序执行，保证父组件先于子组件更新
• post 队列：存放低优先级副作用，比如 watch(flush: 'post')，在 patch 完成、DOM 已更新但尚未重绘时执行

nextTick 回调总在更新之后

你调用 this.$nextTick() 或 nextTick(() => {...})，它的回调会被推入**同一个微任务队列**，但排在所有组件更新 job 之后。所以：

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

• 能确保拿到 patch 后的真实 DOM 结构
• 不会干扰更新顺序，也不会导致重复渲染
• 不是“另起一套调度”，而是调度机制的自然延伸

降级策略保障兼容性，但不改变优先级本质

当 Promise 不可用时，Vue 会依次尝试 MutationObserver（仍是微任务）、setImmediate（Node.js）或 setTimeout(fn, 0)（宏任务）。但要注意：

• 降级到 setTimeout 时，任务会落到宏任务队列，执行时机变晚，可能错过当前帧渲染
• 这种兜底仅用于老旧环境，现代浏览器中几乎 always 走 Promise 分支
• 无论哪种底层实现，Vue 都会确保同一轮更新只执行一次批量刷新