本文介绍如何在 Vue 应用中结合 Bootstrap 实现平滑、可控的加载进度条，解决 setTimeout 一次性更新导致动画失效的问题，并通过 setInterval + ref 实现真实感进度反馈与状态同步。
本文介绍如何在 Vue 应用中结合 Bootstrap 实现平滑、可控的加载进度条，解决 `setTimeout` 一次性更新导致动画失效的问题，并通过 `setInterval` + `ref` 实现真实感进度反馈与状态同步。
在 Vue 单页应用中，为异步操作（如 API 请求、数据库写入）添加视觉反馈至关重要。单纯使用 v-if="isLoading" 控制进度条显隐虽简单，但若配合静态 setTimeout 批量修改宽度，会导致 DOM 更新被批量合并——浏览器仅渲染最终状态（100%），完全丢失中间过渡效果。
✅ 正确实现思路：渐进式更新 + 状态解耦
核心原则是：将“进度变化”与“加载完成”逻辑分离。不应在定时器末尾才设置 isLoading = false，而应在进度达到 100% 后立即触发完成流程（如执行实际数据操作、关闭加载态）。
1. 模板结构（使用 ref 替代 document.getElementById）
<div class="container-fluid p-0 vh-100" v-if="isLoading">
<div class="row m-0">
<div class="col-4 mx-auto">
<div class="progress rounded-0" role="progressbar">
<div
class="progress-bar text-uppercase"
ref="progressBar"
:style="{ width: width + '%' }"
></div>
</div>
</div>
</div>
</div>✅ 优势：
立即学习“前端免费学习笔记（深入）”；
- 使用 ref 获取 DOM 元素更符合 Vue 响应式规范，避免手动 DOM 查询；
- 通过 :style 绑定 width，让 Vue 自动响应数据变化并触发重绘，确保每一帧更新都可见。
2. Vue 实例配置（Composition API 风格，兼容 Options API）
export default {
data() {
return {
isLoading: false,
width: 0,
progressInterval: null
}
},
methods: {
async updateDatabase() {
this.isLoading = true;
this.width = 0;
// 启动模拟进度条（可替换为真实请求监听）
this.progressInterval = setInterval(() => {
if (this.width >= 100) {
clearInterval(this.progressInterval);
this.progressInterval = null;
// ✅ 此处执行真实业务逻辑（如 Supabase 写入）
this.performActualDataOperation().finally(() => {
this.isLoading = false; // 完成后关闭加载态
});
return;
}
// 动态增量：+5% ~ +15%，模拟不均匀加载感
const increment = 5 + Math.floor(Math.random() * 11);
this.width = Math.min(100, this.width + increment);
}, 150);
},
async performActualDataOperation() {
// 示例：调用 Supabase 或其他异步操作
try {
// await supabase.from('table').insert([...]);
await new Promise(resolve => setTimeout(resolve, 2000)); // 模拟耗时操作
} catch (error) {
console.error('数据库更新失败:', error);
throw error;
}
}
},
beforeUnmount() {
// 清理定时器，防止内存泄漏
if (this.progressInterval) {
clearInterval(this.progressInterval);
}
}
}3. 关键注意事项
- 不要在 setTimeout 中链式赋值：preloader.style.width = '15%'; preloader.style.width = '30%'; 在单次 JS 执行中会被浏览器批量优化，无法触发重排/重绘；
- 务必清理定时器：在组件卸载前调用 clearInterval，否则可能引发 this 指向丢失或状态污染；
- 进度 ≠ 真实耗时比例：上述示例采用随机增量模拟“不确定性加载”，更符合用户体验；若需精确进度（如上传文件），应监听 XMLHttpRequest.upload.onprogress 或使用 fetch + ReadableStream；
-
无障碍支持：为 添加 aria-valuenow 和 aria-valuemin/aria-valuemax 属性，提升可访问性：
<div class="progress rounded-0" role="progressbar" :aria-valuenow="width" aria-valuemin="0" aria-valuemax="100" >
✅ 最终效果
- 进度条从 0% 平滑增长至 100%；
- 达到 100% 后自动触发真实数据操作；
- 操作完成后 isLoading 置为 false，进度容器自然消失；
- 全程无硬编码 DOM 查询，符合 Vue 最佳实践。
通过合理运用响应式数据绑定与定时任务调度，你不仅能实现视觉上流畅的加载反馈，更能构建出健壮、可维护的数据加载流程。
