nextTick是Vue为优化性能而设计的异步DOM更新机制，其核心是将数据变化后的DOM更新任务放入微任务队列，在当前同步代码执行完毕后批量刷新，避免重复渲染。
Vue 的响应式数据变化是同步的，但 DOM 更新是异步的——这个“不同步”不是缺陷，而是精心设计的性能优化机制。
响应式数据立刻变，DOM 不会立刻动
当你执行 this.count++ 或 ref.value = 10，JavaScript 层的数据立即更新，你马上能读到新值。但视图不会同步刷新，因为 Vue 把 DOM 更新任务放进一个异步队列，等当前同步代码全部执行完，再统一处理。
这样做的直接好处是：同一轮事件循环中多次修改同一个响应式变量，只会触发一次 DOM 重绘；多个变量同时变化，也只做一次完整更新，避免浏览器反复回流（reflow）和重绘（repaint）。
更新队列怎么工作的？
数据 setter 被触发后，Vue 会通知所有依赖它的 Watcher（比如组件渲染 watcher、计算属性 watcher），但不会马上执行它们的更新逻辑。而是：
立即学习“前端免费学习笔记（深入）”；
- 把对应的 watcher 推入一个去重队列（相同 watcher 多次触发只进一次）
- 通过 nextTick 调度队列清空（flush）操作
- 在下一个微任务（microtask）时机批量执行所有 watcher 的 run 方法
这个队列调度逻辑集中在 queueWatcher 和 flushSchedulerQueue 中，核心就是“攒批 + 延后执行”。
什么时候必须用 nextTick？
只要你想在数据更新后，立刻访问或操作对应的新 DOM，就必须等 DOM 真正渲染完成。典型场景包括：
- 新增列表项后，聚焦到新生成的 input 元素
- 修改元素尺寸相关数据后，调用 getBoundingClientRect() 获取最新布局信息
- 父组件改了子组件 prop，紧接着调用子组件暴露的方法（需确保子组件已重新渲染）
- 在 updated 钩子中操作 DOM，但发现结果还不是最终状态（说明还有后续更新未完成）
写法上推荐使用 await this.$nextTick()（Vue 2/3 均支持），语义清晰且可避免回调嵌套。
nextTick 底层靠什么实现？
Vue 优先选择微任务（microtask）来保证执行时机早于宏任务（macrotask）：
- Vue 3：基于 Promise.then，轻量高效
- Vue 2：依次尝试 Promise.then → MutationObserver → setImmediate → setTimeout
这种降级策略确保在各种环境下都能在当前事件循环末尾准确触发回调，既不延迟过久，也不干扰主线程同步逻辑。
