nextTick 原理

为什么修改数据后不能立刻获取 DOM？

背景：事件循环

JavaScript 执行是单线程的，靠事件循环驱动：

┌─────────────────────────────────────────┐
│                 宏任务队列                │
│  setTimeout | setInterval | I/O | ...   │
└─────────────────┬───────────────────────┘
                  │
                  ▼
┌─────────────────────────────────────────┐
│                微任务队列                │
│  Promise.then | MutationObserver | ...  │
└─────────────────┬───────────────────────┘
                  │
                  ▼
┌─────────────────────────────────────────┐
│                 执行栈                   │
│         (当前正在执行的代码)              │
└─────────────────────────────────────────┘

每执行完一个宏任务，会清空所有微任务，然后再执行下一个宏任务。

Vue 更新是异步的

当你修改响应式数据时，Vue 不会立刻更新 DOM，而是：

  1. 触发 setter
  2. 触发 watcher
  3. 把"需要更新"这个任务放进异步队列
// 假设模板是 {{ count }}
this.count = 1;   // 触发 setter，放入队列
this.count = 2;  // 再次放入队列？不，合并！
this.count = 3;  // 放入队列
// 最终只更新一次 DOM，count = 3

同一个事件循环中的多次修改会合并，这是 Vue 的性能优化策略。

问题：修改后立刻获取 DOM，拿到的还是旧的。

this.count = 1;
console.log(this.$el.textContent); // 可能是 '0'，还没更新！

nextTick 干什么用？

等 DOM 更新完成后，再执行回调：

this.count = 1;
this.$nextTick(() => {
  console.log(this.$el.textContent); // '1'，DOM 已更新
});

Vue 3 用法

<script setup>
import { ref, nextTick } from 'vue'

const count = ref(0)
const el = ref(null)

async function update() {
  count.value = 1
  await nextTick()
  console.log(el.value.textContent) // '1'
}
</script>

<template>
  <div ref="el">{{ count }}</div>
</template>

原理详解

核心实现

// 简化的 nextTick 实现
let callbacks = [] // 回调队列
let pending = false // 是否正在执行

function nextTick(cb) {
  callbacks.push(cb)

  if (!pending) {
    pending = true
    // 用微任务执行
    Promise.resolve().then(() => {
      pending = false
      const copies = callbacks.slice(0)
      callbacks = []
      copies.forEach(cb => cb())
    })
  }
}

关键点：

  • 所有回调存在 callbacks 数组
  • 用 pending 标记确保同一时间只有一个 Promise 在等待
  • 回调通过微任务执行，在 DOM 更新之后

Vue 2 降级策略

Vue 2 还需要兼容旧浏览器：

// 优先级从高到低
const p = Promise.resolve()

export function nextTick(cb) {
  return p.then(() => cb())
}

// 降级方案
// 1. MutationObserver - 监听 DOM 变化
// 2. setImmediate - IE 专用
// 3. setTimeout(fn, 0) - 保底

Vue 3

直接用 Promise.resolve()，不再考虑 IE 兼容性，代码更简洁。

异步更新队列

Vue 内部维护一个 watcher 队列：

// 简化的队列机制
let queue = []
let isFlushing = false

function queueWatcher(watcher) {
  if (!queue.includes(watcher)) {
    queue.push(watcher)
  }

  if (!isFlushing) {
    isFlushing = true
    nextTick(flushQueue)
  }
}

function flushQueue() {
  queue.forEach(watcher => watcher.run())
  queue = []
  isFlushing = false
}

为什么要用队列？

// 模板: {{ a }} {{ b }}
this.a = 1
this.b = 2
  • 如果每个修改都立即更新 DOM，性能很差
  • 队列机制保证 同一事件循环内只更新一次
  • 这就是 Vue 的 批处理（batching）

场景

1. 操作更新后的 DOM

<script>
export default {
  methods: {
    async addItem() {
      this.list.push({ id: Date.now() })
      // 获取新渲染的 DOM 高度
      await this.$nextTick()
      this.scrollToBottom()
    }
  }
}
</script>

2. 修改数据后获取元素尺寸

this.width = '200px'
this.$nextTick(() => {
  const box = this.$refs.box
  console.log(box.offsetWidth) // 200
})

3. 父子组件通信

<!-- Parent -->
<Child :show="showModal" />

<!-- Child -->
watch: {
  show(val) {
    if (val) {
      this.$nextTick(() => {
        this.$refs.input.focus() // DOM 渲染后聚焦
      })
    }
  }
}

4. 表单验证

this.errors.clear()
this.errors.add('name', '必填')
await this.$nextTick()
this.$refs.nameInput.$el.scrollIntoView()

nextTick、单 rAF 和双 rAF 的区别

三者解决的不是同一个问题：

方式大致执行时机可以保证不能保证典型场景
await nextTick()Vue 当前刷新队列完成后的微任务阶段本轮 Vue DOM patch 已完成浏览器已经 Paint读取更新后的 DOM、聚焦、滚动
单次 rAF下一帧 Paint 之前代码已进入浏览器的下一帧调度该帧已经画到屏幕在下一帧修改样式、执行动画步骤
双 rAF再下一帧 Paint 之前两次回调之间尽量留出一次绘制机会GPU 已合成并真正显示的严格通知先展示 Loading，再开始同步重任务

浏览器一帧可以简化为：

JavaScript 任务
→ 清空微任务
→ requestAnimationFrame 回调
→ Style
→ Layout
→ Paint
→ Composite

nextTick：等 Vue 更新 DOM

visible.value = true
await nextTick()

// 新DOM已经提交，可以读取或聚焦
panelRef.value.focus()

这时 DOM 已就绪，但 JavaScript 可能仍处于当前任务后的微任务阶段，浏览器还没有机会 Paint。

单 rAF：在下一帧绘制前执行

await nextTick()

requestAnimationFrame(() => {
  startHeavyWork()
})

时序大致是：

Vue 提交 Loading DOM
→ 下一帧 rAF 执行 startHeavyWork
→ Style / Layout / Paint

如果 startHeavyWork() 是长任务，它会占用主线程，后面的 Paint 仍然要等它结束。所以单 rAF 不能保证 Loading 已经被用户看到。

双 rAF：在两次回调之间留出一帧

const nextFrame = () =>
  new Promise((resolve) => requestAnimationFrame(resolve))

visible.value = true
await nextTick()
await nextFrame()
await nextFrame()

startHeavyWork()

时序更接近：

第0帧：Vue 提交 Loading DOM
第1帧：第一个 rAF 回调 → 浏览器有机会绘制 Loading
第2帧：第二个 rAF 回调 → startHeavyWork

两个 rAF 必须嵌套注册，或像上面一样连续 await。下面的写法会把两个回调放入同一帧，不等于双 rAF：

// 错误理解：两个回调可能在同一帧执行
requestAnimationFrame(first)
requestAnimationFrame(second)

双 rAF 也不是严格的 Paint 完成 API。页面处于后台、主线程被阻塞或 WebView 主动跳帧时，rAF 会被暂停或延迟。它只是给浏览器留出绘制机会的工程技巧。

如何选择

只需要更新后的 DOM：nextTick
需要在下一帧更改样式或执行动画：单 rAF
希望先展示 Loading，再执行同步重任务：双 rAF
重任务本身超过一帧：还应分片、让出主线程或转移到 Web Worker

注意事项

1. 不要在 nextTick 里再修改数据

// ❌ 不好
this.$nextTick(() => {
  this.count = 2 // 可能触发无限循环
})

// ✅ 正确
this.count = 1
this.$nextTick(() => {
  console.log(this.count)
})

2. 连续多个 nextTick

// 不需要嵌套！
// ❌
this.$nextTick(() => {
  this.$nextTick(() => {
    console.log(this.$el)
  })
})

// ✅ 一次就够了，DOM 更新是一次性的
this.$nextTick(() => {
  console.log(this.$el)
})

总结

  • Vue 更新是异步的，会合并同一事件循环内的多次修改
  • nextTick 利用微任务（Promise），在 DOM 更新后执行回调
  • Vue 3 直接用 Promise，Vue 2 有降级策略
  • 适用场景：获取更新后的 DOM、聚焦、滚动、第三方库集成