Vue3 nextTick 什么时候必须用？

Question

仓乃文 · Accepted Answer

Vue 的 DOM 更新是异步的，修改响应式数据后立即读取 DOM 拿到的还是旧值。nextTick 等待 DOM 更新完成后执行回调，确保读取到最新的 DOM 状态。

必须用的场景：
```javascript
import { nextTick } from "vue";
const showInput = ref(false);
const inputRef = ref(null);
const focusInput = async () => {
  showInput.value = true;  // DOM 还没更新
  await nextTick();  // 等待 DOM 更新
  inputRef.value?.focus();  // 现在才能拿到元素
};
```

获取更新后的尺寸：
```javascript
const items = ref([]);
const addAndScroll = async () => {
  items.value.push(newItem);
  await nextTick();  // 等 DOM 更新
  container.scrollTop = container.scrollHeight;  // 滚动到底部
};
```

补充说明：
- nextTick 返回 Promise，推荐用 await 语法
- 修改 ref/reactive 后需要立即操作 DOM 时必须用
- 常见场景：v-if 显示后聚焦、动态添加后滚动、获取元素尺寸
- watch 的 flush: "post" 选项等同于在 nextTick 中执行回调
- 在 created/mounted 中修改数据后读 DOM 也需要 nextTick