深入 Vue 的 nextTick

在初学 Vue 时,我们经常会遇到这样的困惑:数据明明已经改了,可页面却没立刻变化;或者手动去获取更新后的 DOM,结果拿到的是旧值。这时候,Vue 官方会推荐我们使用 this.$nextTick()。它到底做了什么?为什么"等一下"就能解决问题?本文尝试用通俗的语言把它的作用和实现原理讲清楚。

一、nextTick 的作用

Vue 的响应式系统有一个核心设计:异步批量更新。

当你连续修改多条数据时,Vue 不会每改一次就立刻重绘页面,而是把这些变更缓存起来,等到本轮事件循环结束后再统一 patch DOM。

这样做的好处显而易见:

  • 减少不必要的重排重绘,性能更好;
  • 避免同一事件循环里多次操作 DOM 带来的闪烁或抖动。

但副作用也随之而来:

在数据改变后的同一轮同步代码里,DOM 仍然是旧的。

因此,如果你需要在视图真正更新完成后执行某些逻辑(比如获取元素新尺寸、手动聚焦、调用依赖于 DOM 的第三方库),就必须等下一轮。

nextTick它的回调会在当前批量更新结束后、浏览器重绘之前被调用。

举个最简单的例子:

js 复制代码
this.msg = 'Hello'
console.log(this.$el.textContent) // 旧值
this.$nextTick(() => {
  console.log(this.$el.textContent) // 新值
})

二、nextTick 的实现原理

浏览器事件循环里有两类异步队列:

  • 微任务(micro-task):Promise、MutationObserver;执行时机紧跟着当前栈清空后。
  • 宏任务(macro-task):setTimeout、setImmediate、MessageChannel;下一轮事件循环执行。

Vue 的源码中,nextTick 会把所有回调统一放进一个数组,然后用最快且兼容的方式调度:

  1. 如果环境支持 Promise,优先用 Promise.resolve().then() 把回调塞进微任务队列。

    这是现代浏览器最常用、延迟最低的手段。

  2. 如果 Promise 不可用,退而求其次,看是否支持 MutationObserver。

    创建一个文本节点并监听它的变动,当节点改动时触发回调,同样属于微任务。

  3. 如果上述两者都不支持,Vue 会继续降级:

    • 在 IE 里尝试 setImmediate,它介于宏任务与微任务之间,比 setTimeout 快;
    • 最后兜底 setTimeout(fn, 0),把回调放到宏任务队列末尾。

整个流程可以概括为一句话:

"能用微任务就不用宏任务,能用更快的宏任务就不用 setTimeout。"

这样既保证了回调尽早执行,又兼顾了老浏览器的兼容性。

总结

  • 作用:等本轮 DOM 批量更新完再跑回调。
  • 原理:先找微任务,再找宏任务,按优先级把回调塞进最合适的异步队列。
相关推荐
渣哥10 分钟前
代理选错,性能和功能全翻车!Spring AOP 的默认技术别再搞混
javascript·后端·面试
遇见火星14 分钟前
Docker入门:快速部署你的第一个Web应用
前端·docker·容器
WeilinerL31 分钟前
泛前端代码覆盖率探索之路
前端·javascript·测试
浮游本尊34 分钟前
React 18.x 学习计划 - 第五天:React状态管理
前端·学习·react.js
-睡到自然醒~40 分钟前
[go 面试] 前端请求到后端API的中间件流程解析
前端·中间件·面试
洛卡卡了1 小时前
Sentry 都不想接,这锅还让我背?这xx工作我不要了!
前端·架构
咖啡の猫1 小时前
Vue 实例生命周期
前端·vue.js·okhttp
JNU freshman1 小时前
vue 之 import 的语法
前端·javascript·vue.js
剑亦未配妥1 小时前
Vue 2 响应式系统常见问题与解决方案(包含_demo以下划线开头命名的变量导致响应式丢失问题)
前端·javascript·vue.js
爱吃的强哥1 小时前
Vue2 封装二维码弹窗组件
javascript·vue.js