当前位置：首页 > news >正文

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

news 来源：原创 2025/5/11 20:35:31

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="form.email" /></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 = truenextTick(() => {animate.value = trueinputRef.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 = nullfunction openDialog() {visible.value = truenextTick(() => {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>