Vue异步更新队列将多次数据变更合并为一次DOM更新，nextTick在patch完成后、浏览器渲染前执行微任务回调，patch由队列统一触发虚拟DOM比对与更新。
Vue 的异步更新队列是响应式系统高效更新视图的核心设计，它把多次数据变更合并为一次 DOM 更新，避免频繁重绘和布局抖动。NextTick 并不是“等下一个 tick”，而是把回调推入一个微任务队列，确保在当前批次的 patch 完成后、浏览器渲染前执行；而 patch 是虚拟 DOM 差异比对与真实 DOM 更新的实际过程，它由异步队列统一触发。
异步更新队列：为什么不能立刻更新 DOM？
当响应式数据变化时，Vue 不会立即执行 patch，而是将组件的更新任务（即 watcher.run）推入一个队列，并在当前同步代码执行完后、下一个宏任务开始前，用 Promise.then 或 MutationObserver 等微任务机制批量清空该队列。
- 防止同一事件循环中对同一组件重复 patch（比如连续赋值 a = 1; a = 2; 只触发一次更新）
- 保证父子组件更新顺序：父组件先 patch，子组件再 patch，避免子组件依赖未就绪的父状态
- 让开发者有机会在 DOM 更新前/后读取最新或旧的视图状态（通过 nextTick 控制时机）
NextTick：如何精准控制回调时机？
nextTick 接收的回调会被加入同一个微任务队列，但它不参与 patch 流程本身，只是“监听 patch 完成”。它的实现本质是维护一个全局 callbacks 数组，在队列刷新（flushSchedulerQueue）结束后统一调用。
- 如果在 data change 后立即调用 nextTick，回调会在本次 batch 的 patch 执行完后运行
- 多个 nextTick 回调会被去重并合并进同一批微任务，不会重复排队
- 可传入 Promise 风格用法：nextTick().then(() => {...})，适合 async/await 场景
Patch 如何被异步队列触发？
每个需要更新的组件对应一个 watcher，数据变更时调用 watcher.update()，它把 watcher 推入 queue；当 queue 在微任务中被 flush，会依次执行 watcher.run()，进而调用 vm._update(vnode) → patch(oldVnode, vnode)，完成真实 DOM 更新。
立即学习“前端免费学习笔记（深入）”；
- patch 是纯函数式操作：基于新旧 vnode 计算差异，最小化 DOM 操作
- 只有当组件的 render watcher 被 flush，才会触发其 patch；计算属性或侦听器的 watcher 不会直接 patch
- 手动调用 vm.$forceUpdate() 也会走相同队列路径，而非立即 patch
常见误区与调试建议
很多人以为 nextTick 是“等 DOM 渲染完”，其实它等的是 patch 完成——此时 DOM 已更新，但浏览器尚未重绘（requestAnimationFrame 之后才是重绘）。可通过 getBoundingClientRect 或 offsetHeight 强制触发 layout 来验证。
- 不要在 nextTick 回调里再改响应式数据并期望再次 nextTick —— 新变更仍会进入下一轮队列
- 服务端渲染（SSR）中 nextTick 是同步执行的，因为没有浏览器环境，需注意逻辑兼容
- 调试时可在 flushSchedulerQueue 和 patch 函数打日志，观察队列调度与 DOM 更新的时序关系
