Vue 3 中 nextTick 的正确使用场景

js import { nextTick } from 'vue'

### 为什么需要 nextTick

Vue 会在同一个“tick”（事件循环的微任务阶段）中批量处理数据变化，然后一次性更新 DOM。这意味着：

```js
const count = ref(0)
count.value++
// 此时 DOM 还没有更新

如果在数据变化后立刻读取某个依赖于 count 的 DOM 元素的状态，可能会拿到旧值。nextTick 能确保回调在 DOM 更新之后执行。

基本用法

回调形式

nextTick(() => {
  // DOM 已更新
})

Promise 形式（更适合 async/await）

await nextTick()
// 之后可以安全地操作 DOM

正确使用场景

1. 在数据变化后立即操作 DOM

当你修改响应式数据后，需要立刻获取某个元素的尺寸、滚动位置，或是手动聚焦某个输入框时，必须等待 DOM 更新。

<template>
  <div>
    <input v-if="show" ref="inputRef" />
    <button @click="showInput">显示并聚焦</button>
  </div>
</template>

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

const show = ref(false)
const inputRef = ref(null)

async function showInput() {
  show.value = true
  // 等待 input 元素渲染完成
  await nextTick()
  inputRef.value.focus()
}
</script>

2. 获取更新后的子组件或元素引用

当 v-if/v-for 切换导致元素重新创建时，模板引用（如 ref）也会随之更新。使用 nextTick 来确保引用的赋值已经完成。

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

const showChild = ref(false)
const childRef = ref(null)

async function toggleChild() {
  showChild.value = !showChild.value
  await nextTick()
  if (showChild.value) {
    childRef.value.someMethod() // 安全调用子组件暴露的方法
  }
}
</script>

3. 在组合式 API 中等待响应式状态更新

有时你需要在一个函数中修改多个响应式状态，并根据这些状态变化后的结果执行逻辑。尽管 Vue 会合并更新，但如果你需要按更新后的顺序去处理，await nextTick() 可以作为一个明确的等待点。

import { ref, nextTick } from 'vue'

const items = ref([1, 2, 3])
const done = ref(false)

async function processItems() {
  items.value.push(4)
  await nextTick()
  // 此时 v-for 渲染出的列表已经包含了新项
  console.log('列表已更新')
  done.value = true
}

4. 在测试中等待 DOM 更新

在使用 Vue Test Utils 或编写组件测试时，nextTick 几乎是必用的。触发事件后，你需要等待视图更新再去做断言。

import { mount } from '@vue/test-utils'
import { nextTick } from 'vue'
import MyComponent from './MyComponent.vue'

test('点击后显示新文本', async () => {
  const wrapper = mount(MyComponent)
  await wrapper.find('button').trigger('click')
  // 组件内部数据可能已经改变，但 DOM 尚未更新
  await nextTick()
  expect(wrapper.text()).toContain('已激活')
})

5. 处理多个状态变更的批量更新

当你在同一段代码中连续修改多个数据源时，Vue 会将它们批量处理并一次性更新 DOM。你可以在所有更改完成后调用一次 nextTick，而不是在每次修改后调用。

const firstName = ref('')
const lastName = ref('')

async function updateName(first, last) {
  firstName.value = first
  lastName.value = last
  // 两个修改只触发一次 DOM 更新
  await nextTick()
  // DOM 同时反映了 first 和 last 的更新
}

常见误区

1. 滥用 nextTick

错误示范：在所有数据修改后都加上 await nextTick()，哪怕后续没有 DOM 操作。

count.value++ // 不需要 nextTick，除非你马上要读 DOM
await nextTick() // 多余，浪费一个微任务

正确做法：只在必须基于最新 DOM 或子组件状态执行代码时才使用。

2. 在同步代码中不必要地嵌套 nextTick

如果当前代码已经在一个 nextTick 回调或微任务中，DOM 已经更新，再调用 nextTick 只会延迟执行。

await nextTick()
// DOM 已经更新，此处直接操作即可
elementRef.value.focus()
// 不需要再套一层 nextTick

3. 忘记返回 Promise 导致时序问题

在 async 函数内部可能需要对 nextTick 做 await，但有时候在外层调用时忘了 await，导致函数提前返回。

function badExample() {
  nextTick(() => {
    console.log('可能晚于外层代码执行')
  })
  console.log('先执行')
}
// 如果需要保证顺序，使用 await 或返回 Promise 并在外层 await