Vue nextTick：在操作 DOM 前等待更新完成

译注：本文翻译自 dev.to 上 Jacob Andrewsky 的文章，原文发布于 2026 年 9 月 21 日。原文链接见文末。文章面向 Vue 开发者，解释了 nextTick() 的用途、原理与常见误区。

学习 Vue 时，你最早接触的概念之一就是：修改响应式状态会自动更新 DOM。

但有一个重要细节常常导致意料之外的行为：

👉 DOM 并不会在每次状态变更后同步更新。

Vue 会将 DOM 更新批量处理，并异步应用。这是一项重要的优化——多次状态变更可以被合并处理，而不是每次修改都触发一次独立的 DOM 更新。

大多数时候，你不需要关心这一点。但有时你需要在修改状态后立即操作由此产生的 DOM。这正是 nextTick() 的用武之地。

本文将探讨：

nextTick() 是什么
为什么 Vue 不同步更新 DOM
如何使用 nextTick()
真实场景示例
nextTick() 何时有用
常见错误与最佳实践

🤔 `nextTick()` 是什么？

nextTick() 是 Vue 提供的一个工具函数，用于等待 Vue 完成待处理的 DOM 更新刷新。

基本 API 如下：

typescript

import { nextTick } from 'vue'

await nextTick()

你通常会在修改响应式状态之后使用它：

typescript

count.value++

await nextTick()

// DOM 此时已更新

Vue 官方文档将 nextTick() 描述为等待下一次 DOM 更新刷新的工具函数。关键在于理解为什么需要等待。

🟢 为什么 Vue 不立即更新 DOM？

假设你有这样一段代码：

vue

<script setup lang="ts">
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {{ count }}
  </button>
</template>

当你执行：

typescript

count.value++

Vue 知道模板需要更新，但 DOM 不一定立即改变。Vue 会缓冲这次更新，并在下一个更新周期中处理它。

这使 Vue 能够合并多次状态变更：

typescript

count.value++
count.value++
count.value++

将其合并为一次 DOM 更新，而不是不必要地更新 DOM 三次。这种批处理行为是 Vue 保持渲染效率的方式之一。

🟢 `nextTick()` 解决的问题

当你想在修改响应式状态后立即访问 DOM 时，这种差异就变得重要了。

考虑以下代码：

vue

<script setup lang="ts">
import { ref } from 'vue'

const message = ref('Hello')

function updateMessage() {
  message.value = 'Hello Vue'

  console.log(
    document.querySelector('#message')?.textContent
  )
}
</script>

<template>
  <p id="message">
    {{ message }}
  </p>
</template>

你可能期望控制台输出：

Hello Vue

但它可能仍然是：

Hello

为什么？因为 Vue 已经更新了响应式状态，但 DOM 更新尚未刷新。这正是 nextTick() 所针对的场景。

🟢 实战示例：聚焦输入框

最实用的真实场景之一，是动态渲染一个元素后立即与之交互。

设想一个表单，点击按钮后显示一个输入框：

vue

<script setup lang="ts">
import { ref, nextTick } from 'vue'

const showInput = ref(false)
const input = ref<HTMLInputElement | null>(null)

async function showAndFocus() {
  showInput.value = true

  await nextTick()

  input.value?.focus()
}
</script>

<template>
  <button @click="showAndFocus">
    Add item
  </button>

  <input
    v-if="showInput"
    ref="input"
    placeholder="Enter item"
  />
</template>

如果不使用 nextTick()，这段代码可能失败：

typescript

showInput.value = true

input.value?.focus()

此时 <input> 可能尚未存在于 DOM 中，因为 Vue 还没有处理 v-if 更新。

而使用：

typescript

showInput.value = true

await nextTick()

input.value?.focus()

你就能等到 Vue 渲染出输入框之后再操作。

这一模式在以下场景中极为有用：

搜索框
对话框
行内编辑
动态表单
键盘交互

🟢 `nextTick()` 不是通用的延迟手段

一个常见的误解是认为：

typescript

await nextTick()

等同于：

typescript

await new Promise(resolve =>
  setTimeout(resolve, 0)
)

两者并不相同。nextTick() 与 Vue 的 DOM 更新周期直接相关。

它表达的不是：

“等待任意一段时间。”

而是：

“等待 Vue 刷新待处理的 DOM 更新。”

这是一个精确得多的操作。

🟢 不要到处使用 `nextTick()`

重要的是，不要每次修改响应式状态后都加上 nextTick()。

例如，下面这种写法通常没有意义：

typescript

count.value++

await nextTick()

console.log(count.value)

仅仅为了读取响应式状态，并不需要等待 DOM。值早已改变：

typescript

count.value++
console.log(count.value)

使用 nextTick() 的理由，是你确实需要操作更新后的 DOM。请思考这个区别：

响应式状态
    ↓
已经更新

DOM
    ↓
异步更新

如果你只关心响应式状态，就不需要 nextTick()。如果你需要 DOM 反映出该状态，nextTick() 才是合适的工具。

✅ 小结

Vue 的 nextTick() 只是一个小工具，但它解决了一个重要问题：知道 DOM 何时跟上了你的响应式状态。

最重要的一点是：

👉 当你需要在修改响应式状态后操作 DOM 时，使用 nextTick()。

在常规 Vue 开发中，你通常不需要它——Vue 会替你处理响应式更新。但当你的代码需要表达：

“修改这个状态，等 Vue 渲染完成后，再对 DOM 做点什么。”

这正是 nextTick() 发挥作用的时刻。

原文链接

https://dev.to/jacobandrewsky/vue-nexttick-wait-for-the-dom-to-update-before-you-touch-it-56ic

Vue nextTick：在操作 DOM 前等待更新完成 ​

🤔 nextTick() 是什么？ ​

🟢 为什么 Vue 不立即更新 DOM？ ​

🟢 nextTick() 解决的问题 ​

🟢 实战示例：聚焦输入框 ​

🟢 nextTick() 不是通用的延迟手段 ​

🟢 不要到处使用 nextTick() ​

✅ 小结 ​

原文链接 ​

相关文章

Vue nextTick：在操作 DOM 前等待更新完成

🤔 `nextTick()` 是什么？

🟢 为什么 Vue 不立即更新 DOM？

🟢 `nextTick()` 解决的问题

🟢 实战示例：聚焦输入框

🟢 `nextTick()` 不是通用的延迟手段

🟢 不要到处使用 `nextTick()`

✅ 小结

原文链接