nextTick 的核心使用场景

理解 nextTick 最简单的场景是：当数据变了，你想基于更新后的 DOM 做点什么，但发现 DOM 还没有更新。 这是因为 Vue 对数据变化的响应是异步批量处理的（见 7.1 节），你在数据被修改后立即读取 DOM，拿到的是旧 DOM。nextTick 的回调会在 DOM 更新完成后执行，为你提供正确的时机。

场景一：获取更新后的 DOM 状态

修改数据后，需要获取新 DOM 的尺寸、滚动位置、或操作某个焦点。

const inputRef = ref(null)
const message = ref('')

function showAndFocus() {
  message.value = '请输入内容'
  // 此时输入框可能还不可见或未渲染完成
  inputRef.value?.focus() // 报错或无效，因为 DOM 还没更新
}

使用 nextTick 解决：

async function showAndFocus() {
  message.value = '请输入内容'
  await nextTick()
  // DOM 已更新，可以安全地获取焦点
  inputRef.value?.focus()
}

场景二：第三方库依赖更新的 DOM

当你在 Vue 组件中集成非 Vue 的库（如图表、富文本编辑器、地图 SDK），它们通常需要直接操作一个已存在的 DOM 容器。你的数据驱动容器渲染后，必须等 DOM 真正挂载后再初始化第三方库。

<template>
  <div ref="chartContainer"></div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import Chart from 'chart.js'

const chartContainer = ref(null)

onMounted(async () => {
  // 确保容器在 DOM 中
  await nextTick()
  new Chart(chartContainer.value, { /* 配置 */ })
})
</script>

即使 onMounted 意味着组件已挂载，但若该容器受条件渲染控制（比如 v-if 刚刚变为 true），仍需 nextTick 等待相应 DOM 更新。

场景三：子组件挂载后访问其内部元素

父组件通过 ref 获取子组件实例，并想要调用其暴露的方法或访问其 DOM 时，需要确保子组件已经完成挂载。

<template>
  <ChildComponent ref="childRef" />
</template>

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

// 在某个方法中
async function callChildMethod() {
  // 触发子组件显示某些内容
  someTrigger.value = true
  await nextTick()
  childRef.value.doSomething()
}
</script>

场景四：连续多个依赖有序执行

当你需要数据更新后，再触发另一个数据更新，且每一步都依赖前一步的 DOM 结果，可以使用 await nextTick() 串联流程，确保每一步的界面都已就位。

注意事项

• 不要过度使用：nextTick 是异步等待问题的工具，不是常规状态管理的替代品。如果两个操作之间没有依赖更新的 DOM，无需等待。
• 尽量不要在计算属性或侦听器中滥用：这些地方通常依赖响应式数据本身，而不是 DOM 渲染结果。
• 微任务时序：当多个 nextTick 回调排队时，它们都在同一次微任务队列中按序执行（见 7.3 节），可以放心使用。

简而言之：当你在修改数据后，需要“等 Vue 把界面更新完再干活”，就是 nextTick 出场的时候。