7.4 同步更新与异步更新的场景辨析

在第 7.3 节中我们了解到，Vue 出于性能考虑，将数据变化触发的视图更新放入异步队列中批量执行。这意味着大部分时候，你修改完数据后，DOM 并不会立即改变。理解这种异步更新的行为规律，是避免踩坑的关键。

默认行为：数据变，DOM 未动

看一个最常见的例子：

<template>
  <div id="app">
    <p ref="msgRef">{{ message }}</p>
    <button @click="handleClick">更新</button>
  </div>
</template>

<script setup>
import { ref, nextTick } from 'vue'
const message = ref('Hello')
const msgRef = ref(null)

function handleClick() {
  message.value = 'Hello, Vue!'
  // 此时 DOM 中的 <p> 标签内容仍然显示 'Hello'
  console.log(msgRef.value.textContent) // 输出: 'Hello'
}
</script>

你修改了 message，紧随其后去获取 DOM 节点上的文本，得到的却是旧值。这不是 bug，而是 Vue 的异步更新机制在发挥作用：组件更新被推入一个微任务队列，在当前同步代码全部执行完毕后，才会统一进行一次渲染。修改数据只是触发了一个“待更新”标记，真正的 DOM 操作在后面的某一个时间点才发生。

为什么需要这种异步行为

Vue 设计异步更新的出发点非常务实：避免无用功。一个事件的回调里可能会连续修改多个响应式数据，如果每改一个数据就立即更新一次 DOM，相当于同一个组件在几十毫秒内被反复重绘，白白浪费性能。把多次数据变更合并成一次更新，就能确保组件只重新渲染一次，最终 DOM 也只操作一次。对于高频场景（如 scroll、mousemove 事件的处理），这种合并的收益尤其明显。

什么时候需要关心“更新完成”的时机

绝大多数业务代码并不需要知道 DOM 什么时候真正更新——反正界面上迟早会显示正确内容。但以下场景要求你必须在 DOM 更新之后执行操作：

依赖更新后 DOM 的操作：如获取某个列表项的最新高度来滚动到某一位置，或聚焦到新插入的输入框。
与第三方库协作：当你手动操作了一个 Vue 未管的 DOM 区域，并需要同步它的尺寸、位置等信息。
测试与调试：在单元测试中，修改数据后需要断言最终的 DOM 状态。

这时候，nextTick 就是你的可靠伙伴。

<script setup>
import { ref, nextTick } from 'vue'
const message = ref('Hello')
const msgRef = ref(null)

async function handleClick() {
  message.value = 'Hello, Vue!'
  // 等待 DOM 更新完成
  await nextTick()
  console.log(msgRef.value.textContent) // 输出: 'Hello, Vue!'
}
</script>

nextTick 返回一个 Promise，它会在本次 DOM 更新完成后 resolve。把它放在 await 后面，就可以保证之后的代码运行在全新的 DOM 状态下。

一个常见误区：试图让 Vue “同步更新”

有些开发者遇到“修改数据后 DOM 没变”的情况，会试图寻找让 Vue 同步更新的配置。但 Vue 没有提供同步更新的开关，这是有意为之。如果你遇到了“数据变了但视图没变”的问题，大概率不是异步更新的锅，而是响应式失效（比如直接给 reactive 对象添加新属性，或者解构丢失响应等）。先检查响应式绑定是否正确，远比试图打通“同步更新”更有意义。

特殊场景：在异步任务中获取 DOM

注意，nextTick 只能保证在当前这一轮数据变更所触发的 DOM 更新完成后拿到最新 DOM。如果你在 setTimeout 或其他宏任务中修改数据，然后又想在当前宏任务中获取 DOM，同样需要一个对应的 nextTick。这是因为每个宏任务有自己的更新队列。

setTimeout(() => {
  message.value = 'updated'
  // 如果不使用 nextTick，这里依然可能拿到旧 DOM
  await nextTick()
  console.log(document.getElementById('msg').textContent)
}, 1000)

总结：什么时候没事，什么时候必须管

不需要管：修改数据后直接进行其他不依赖 DOM 的计算、继续修改其他数据、发起网络请求。这些操作不会因为 DOM 未更新而受任何影响，尽管放心写。
必须管：修改数据后立即需要读取或操作由该数据驱动的真实 DOM 节点，比如获取尺寸、调用原生 API、设置焦点等。此时就用 await nextTick() 包裹后续逻辑，简洁且可靠。

记住一个简单规则：数据是你的唯一真相，DOM 只是它的反映。不要让代码逻辑依赖“DOM 刚好更新完”的巧合——如果真的需要依赖，就显式地用 nextTick 表达出来。这样你的代码不仅正确，意图也更加清晰。