vue调度器通过“合并更新+微任务延迟执行”实现只更新一次：同一轮事件循环中多次变更同一组件，仅保留最后一次进队；依赖watcher或effect唯一id去重，并在微任务清空后统一flush。
Vue 的响应式数据变更不会立刻刷新 DOM，而是交由调度器（Scheduler）统一协调——它把零散的更新请求合并、去重、排序后，在浏览器渲染前集中处理，既保性能又稳状态。
调度器怎么做到“只更新一次”？
当你连续修改同一个响应式值（比如 this.count++ 执行 5 次），setter 被触发多次，但调度器会拦截所有对应组件的更新任务，只保留最后一次进队列。这是靠组件 Watcher 或 effect 的唯一 ID 实现的去重逻辑，避免重复生成 VNode 和 patch。
- 同一组件在单轮事件循环中多次标记“待更新”，最终只执行一次 render
- 不同组件的更新任务都进入同一个微任务队列，共享去重与排序规则
- 即使在 watch 或 computed 中触发新变更，只要还在本轮，也会被合并进当前队列或推到下一轮
为什么父组件总比子组件先更新？
调度器在 flush 前会对队列中的更新任务按 ID 升序排序。由于 Vue 创建组件时，父组件实例总早于子组件，其 effect 或 Watcher 的 ID 更小，因此排在前面。这样能确保子组件在更新时读取到父组件的最新 props 和状态，防止视图撕裂或警告。
- 排序不是按调用顺序，而是按组件初始化先后决定的逻辑顺序
- 没有 key 的 v-for 或嵌套过深的动态组件可能干扰依赖链路，间接影响排序效果
- 手动使用
nextTick或await nextTick()可以观察到父子更新的真实时序
调度器靠什么时机执行？
它把批量刷新逻辑注册为微任务（Promise.then 或 queueMicrotask），确保在当前同步代码执行完、浏览器开始重绘前运行。这个时机比 setTimeout（宏任务）更早，比同步执行更安全——既能拿到最新数据，又不会阻塞主线程。
- 微任务队列清空后，浏览器才进行 layout 和 paint，所以 DOM 更新一定赶在绘制之前
- 若环境不支持 Promise，Vue 会降级使用 MutationObserver 或 setTimeout，但语义保持一致
- 你写的
watch、computed、onUpdated都依赖这套时机机制来对齐视图状态
哪些写法容易绕过调度器？
调度器再智能，也防不住人为打破响应式链条。常见破防点包括：
- 模板里写内联对象：
:style="{ left: x + 'px' }"每次都是新引用，强制整个组件重算 - v-for 不设 key：DOM 复用失效，看似更新实则重建，浪费调度成果
- 直接改深层属性：
obj.a.b.c = 1若 b 不是响应式对象，变更无法被 trigger 捕获 - 解构响应式对象：
const { count } = reactive({ count: 0 })会丢失响应性，读取不再触发依赖收集
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
