深入 Vue 的 nextTick_vue的nexttick的作用
在初学 Vue 时，我们经常会遇到这样的困惑：数据明明已经改了，可页面却没立刻变化；或者手动去获取更新后的 DOM，结果拿到的是旧值。这时候，Vue 官方会推荐我们使用 this.$nextTick()。它到底做了什么？为什么“等一下”就能解决问题？本文尝试用通俗的语言把它的作用和实现原理讲清楚。
一、nextTick 的作用
Vue 的响应式系统有一个核心设计：异步批量更新。
当你连续修改多条数据时，Vue 不会每改一次就立刻重绘页面，而是把这些变更缓存起来，等到本轮事件循环结束后再统一 patch DOM。
这样做的好处显而易见：
- 减少不必要的重排重绘，性能更好；
- 避免同一事件循环里多次操作 DOM 带来的闪烁或抖动。
但副作用也随之而来：
在数据改变后的同一轮同步代码里，DOM 仍然是旧的。
因此，如果你需要在视图真正更新完成后执行某些逻辑（比如获取元素新尺寸、手动聚焦、调用依赖于 DOM 的第三方库），就必须等下一轮。
nextTick它的回调会在当前批量更新结束后、浏览器重绘之前被调用。
举个最简单的例子：
二、nextTick 的实现原理
浏览器事件循环里有两类异步队列：
- 微任务（micro-task）：Promise、MutationObserver；执行时机紧跟着当前栈清空后。
- 宏任务（macro-task）：setTimeout、setImmediate、MessageChannel；下一轮事件循环执行。
Vue 的源码中，nextTick 会把所有回调统一放进一个数组，然后用最快且兼容的方式调度：
- 如果环境支持 Promise，优先用 Promise.resolve().then() 把回调塞进微任务队列。
- 这是现代浏览器最常用、延迟最低的手段。
- 如果 Promise 不可用，退而求其次，看是否支持 MutationObserver。
- 创建一个文本节点并监听它的变动，当节点改动时触发回调，同样属于微任务。
- 如果上述两者都不支持，Vue 会继续降级：
- 在 IE 里尝试 setImmediate，它介于宏任务与微任务之间，比 setTimeout 快；
- 最后兜底 setTimeout(fn, 0)，把回调放到宏任务队列末尾。
整个流程可以概括为一句话：
“能用微任务就不用宏任务，能用更快的宏任务就不用 setTimeout。”
这样既保证了回调尽早执行，又兼顾了老浏览器的兼容性。
总结
- 作用：等本轮 DOM 批量更新完再跑回调。
- 原理：先找微任务，再找宏任务，按优先级把回调塞进最合适的异步队列。
