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 更新完成后执行
})
AI 代码解读
Options API 中使用
this.$nextTick(() => {
// DOM 更新完成后执行
})
AI 代码解读
实战案例一：表单校验后滚动到第一个错误项
在实际开发中，表单校验失败后，如果页面内容较多，用户往往看不到错误提示。这时，我们可以利用 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>
AI 代码解读
实战案例二：弹窗打开后自动聚焦输入框 + 播放动画
弹窗打开时，通常需要自动聚焦第一个输入框，并希望有一个淡入动画。这同样需要 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>
AI 代码解读
实战案例三：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>
AI 代码解读
总结
nextTick 在 Vue 3 中解决的是“响应式数据变更后，需要访问更新后的 DOM”的问题。在以下场景中尤为关键：
表单校验提示后的自动滚动；
弹窗打开后的输入框聚焦；
Tab 页切换后图表初始化；
动态组件挂载后的插件调用。
