Vue 3 中的 nextTick 使用详解与实战案例

Vue 3 中的 nextTick 使用详解与实战案例

在 Vue 3 的日常开发中，我们经常需要在数据变化后等待 DOM 更新完成再执行某些操作。此时，nextTick 就成了一个不可或缺的工具。本文将介绍 nextTick 的基本用法，并通过三个实战案例，展示它在表单验证、弹窗动画、自动聚焦等场景中的实际应用。

什么是 nextTick？

在 Vue 3 中，nextTick 是一个异步函数，它会在下次 DOM 更新循环结束之后执行回调。这是因为 Vue 会将响应式数据的更新进行批处理，在当前“tick”中收集所有变化并在下一个“tick”中统一更新 DOM。nextTick 的作用就是等待这个过程结束之后再执行某段逻辑。

基本用法

Composition API 中使用

import { nextTick } from 'vue'

nextTick(() => {
  // DOM 更新完成后执行
})

Options API 中使用

this.$nextTick(() => {
  // DOM 更新完成后执行
})

实战案例一：表单校验后滚动到第一个错误项

在实际开发中，表单校验失败后，如果页面内容较多，用户往往看不到错误提示。这时，我们可以利用 nextTick 等待错误信息渲染完毕后，滚动到第一个出错的字段。

<template>
  <el-form ref="formRef" :model="form" :rules="rules">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="https://www.91chuli.com/" />
    </el-form-item>
    <el-button @click="submit">提交</el-button>
  </el-form>
</template>

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

const formRef = ref()
const form = reactive({ name: '', email: '' })
const rules = {
  name: [{ required: true, message: '请输入姓名' }],
  email: [{ required: true, message: '请输入邮箱' }]
}

function submit() {
  formRef.value.validate((valid, fields) => {
    if (!valid) {
      nextTick(() => {
        const firstError = Object.keys(fields)[0]
        const el = document.querySelector(`[prop="${firstError}"]`)
        if (el) {
          el.scrollIntoView({ behavior: 'smooth', block: 'center' })
        }
      })
    }
  })
}
</script>

实战案例二：弹窗打开后自动聚焦输入框 + 播放动画

弹窗打开时，通常需要自动聚焦第一个输入框，并希望有一个淡入动画。这同样需要 nextTick 保证 DOM 已完全渲染。

<template>
  <el-button @click="openDialog">新增记录</el-button>
  <el-dialog v-model="visible" title="表单" class="fade-dialog">
    <div ref="formBox" class="form-box" :class="{ 'animate-in': animate }">
      <el-input ref="inputRef" v-model="form.name" placeholder="请输入用户名" />
    </div>
  </el-dialog>
</template>

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

const visible = ref(false)
const animate = ref(false)
const inputRef = ref()
const form = reactive({ name: '' })

function openDialog() {
  visible.value = true
  nextTick(() => {
    animate.value = true
    inputRef.value?.focus()
  })
}
</script>

<style scoped>
.fade-dialog .form-box {
  opacity: 0;
  transform: scale(0.9);
  transition: all 0.3s ease;
}
.fade-dialog .form-box.animate-in {
  opacity: 1;
  transform: scale(1);
}
</style>

实战案例三：ECharts 图表在弹窗中初始化

如果你在弹窗或 Tab 页中使用图表（如 ECharts），需要等容器 DOM 显示后再初始化图表，否则图表会渲染失败或大小异常。

<template>
  <el-button @click="openDialog">查看图表</el-button>
  <el-dialog v-model="visible" width="50%">
    <div ref="chartRef" style="height: 400px;"></div>
  </el-dialog>
</template>

<script setup>
import { ref, nextTick, onMounted } from 'vue'
import * as echarts from 'echarts'

const visible = ref(false)
const chartRef = ref(null)
let chartInstance = null

function openDialog() {
  visible.value = true
  nextTick(() => {
    if (!chartInstance) {
      chartInstance = echarts.init(chartRef.value)
    }
    chartInstance.setOption({
      title: { text: '访问量趋势' },
      xAxis: { type: 'category', data: ['一月', '二月', '三月'] },
      yAxis: { type: 'value' },
      series: [{ data: [120, 200, 150], type: 'bar' }]
    })
  })
}
</script>

总结

nextTick 在 Vue 3 中解决的是“响应式数据变更后，需要访问更新后的 DOM”的问题。在以下场景中尤为关键：

表单校验提示后的自动滚动；

弹窗打开后的输入框聚焦；

Tab 页切换后图表初始化；

动态组件挂载后的插件调用。