Vue 的调度器负责决定副作用何时执行，以保持 DOM 与状态同步。它通过维护多个内部队列来实现高效、可预测的更新流程，避免频繁重绘并支持微任务与宏任务的协同工作。怎么说呢，

前置任务队列

前置任务在组件实际渲染之前执行。用来准备数据或校验状态，它们保存在 queue 队列中，但会被特殊处理。

flushPreFlushCbs 执行前置任务

function flushPreFlushCbs(
instance?: ComponentInternalInstance,seen?: CountMap,i: number = flushIndex +。): void {
if { seen = seen || new Map }
for {
const cb = queue
if {
if continue
if ) continue
// 从队列中移除当前前置任务
queue.splice
i--
if {
cb.flags!&= ~SchedulerJobFlags.QUEUED
}
// 执行前置回调
cb
if ) {
cb.flags!&= ~SchedulerJobFlags.QUEUED
}
}
}
}

在 render 或 updateComponentPreRender 时调用。

从示例来看，watch 的 pre 配置

User 常见痛点：为何 watch 的 pre 配置会提前触发？ 答案是因为它被标记为 PRE 标志。在 flushPreFlushCbs 中优先执行，从而确保依赖已经更新完毕再进行计算。

基础任务队列

This 队列同时保存主渲染/更新 effect 与普通 job。如 @nextTick/@queueJob.

queueJob 加入主任务队列

function queueJob: void {
if ) {
const jobId = getId
const lastJob = queue
if && jobId>= getId)) {
queue.push
} else {
queue.splice,job)
}
job.flags!|= SchedulerJobFlags.QUEUED
// 异步刷新触发 microtask 执行所有 queued jobs。queueFlush
}
}

queueFlush – 微任务触发器

function queueFlush {
if {
currentFlushPromise = resolvedPromise.n
}
}
const resolvedPromise = Promise.resolve as Promise

• MVP： "为什么刷新总是延迟到微任务？" 因为 Vue 想把所有变更聚合后一次性执行，从而减少重绘次数。
• MVP： "为什么我看不到立即更新？" 这就是微任务机制：同步代码先跑完，接下来才触发真正的 DOM 更新。

flushJobs – 主循环执行主任务和后置队列

function flushJobs {
if seen = seen || new Map
try {
for {
const job = queue
if ) {
if ) continue
callWithErrorHandling(
job。job.i,job.i，ErrorCodes.COMPONENT_UPDATE : ErrorCodes.SCHEDULER。)
// 清理标记，为下次循环做准备。if )
job.flags!&= ~SchedulerJobFlags.QUEUED;}
}
} finally { ... cleanup ... }
}

User 常见痛点："为什么某些 effect 会被跳过？" 原因是它们被标记为 DISPOSED 或者已进入递归检查导致排除。

示例的观点是，组件更新流程

A 在点击按钮后Vue 会把整个 component 的 render effect 加入到 queue>。接下来由 flushJobs 在下一 tick 执行。这样可以确保一次完整渲染，而不是每个属性变更都单独渲染。说起来，

This 队列在组件真实 DOM 更新完成后才执行。用于生命周期钩子、指令回调等需要“视图已刷新的”场景。话说回来，

queuePostRenderEffect – 放入“渲染后”副作用

• watches with `flush:'post'`.
• `mounted`,`updated` 生命周期钩子.
• `onMounted`。`onUpdated` 指令回调.
• Suspense 边界内部异步组件相关逻辑.
• `onUnmounted` 钩子.

const queuePostRenderEffect: (
fn这方面，SchedulerJobs,suspense: SuspenseBoundary | null,) => void =
__FEATURE_SUSPENSE__
__TEST__
=> queueEffectWithSuspense
: queueEffectWithSuspense
: queuePostFlushCb;

queueEffectWithSuspense – Suspense 情况下的延迟执行

function queueEffectWithSuspense(
从fn来看。Function | Function,suspense: SuspenseBoundary | null,): void{
if{
isArray?suspense.effects.push:suspense.effects.push;}else{
// 将副作用添加到全局 post-flush 队列
queuePostFlushCb;}
}

User 痛点："为什么某些回调在挂载后才触发？" 因为它们放进了 post‑flush 队列，只会等到主循环结束而且 DOM 已经写入后再跑。

queuePostFlushCb – 添加到后置池

function queuePostFlushCb: void{
if){
pendingPostFlushCbs.push;cb.flags|=SchedulerJobFlags.QUEUED;}else{
pendingPostFlushCbs.push;其实，}
// 如果没有正在刷新，就立刻安排一次刷新。
return，currentFlushing?resolveNextTick.n : undefined;}
const pendingPostFlushCbs:Array=;老实说，let activePostFlushCbs:Array|null=null;let postFlushing=false;let postFlushingIndex=0;按理说，const resolvedPromise=Promise.resolve;const requestIdleCallbackSupported=typeof requestIdleCallback==='function';


从MVP来看，**“为什么 afterRender 回调总是跑慢？”**
答：因为它们排到了微任务之后被 Vue
包装为宏 task，从而顺序保证了真正渲染完成。


flushPostFluxCbs – 真正跑后的函数 

function flushPostFluxCbs{
if{
let deduped=.sort=>getId-getId);pendingFluxCBs.length=0;if{ activeFluxCBs.push;return，}
activeFluxCBs=deduped;for.length)，postFlushingIndex++){
const fn=activeFluxCBs;fn，fn.flags&=&~SchedulerFlag.FLUSHED;}
activeFluxCBs=null;}
}


常见误区
- 误以为所有 lifecycle 都是同步；- 认为 nextTick 就能等待浏览器绘制；- 忽视 Suspense 对副作用时序的影响。这些都是 Vue 调度器细节导致的问题。老实说，


理解上述机制可以方便你定位 “卡顿”、无效更新、生命周期错位 等问题。也能让你写出更高效、更可预测的 Vue 应用。


nextTick

html