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

别再手动写Loading了！用Vue 3的Composition API封装一个全局加载动画（附完整代码）

news 2026/6/9 1:48:03

Vue 3全局加载动画：Composition API的优雅实现方案

在现代化前端开发中，用户体验的流畅性至关重要。页面加载时的等待状态处理不当，轻则影响用户感知，重则导致用户流失。本文将深入探讨如何利用Vue 3的Composition API构建一个类型安全、高复用性的全局加载动画系统，彻底告别手动管理Loading状态的繁琐时代。

1. 全局加载状态的核心设计

1.1 响应式状态管理

Composition API的核心优势在于逻辑复用和能力组合。我们首先创建一个独立的useLoading组合式函数：

import { ref, computed } from 'vue'; export function useLoading() { const loadingCount = ref(0); const isLoading = computed(() => loadingCount.value > 0); const startLoading = () => { loadingCount.value++; }; const stopLoading = () => { if (loadingCount.value > 0) { loadingCount.value--; } }; return { isLoading, startLoading, stopLoading }; }

这个基础实现通过计数器模式处理嵌套加载场景，确保多个异步操作同时发生时Loading状态能正确维持。

1.2 依赖注入体系

Vue 3的provide/inject机制让我们可以轻松创建全局状态：

import { provide, inject } from 'vue'; const LoadingSymbol = Symbol('loading'); export function provideLoading() { const loading = useLoading(); provide(LoadingSymbol, loading); return loading; } export function useInjectLoading() { const loading = inject(LoadingSymbol); if (!loading) { throw new Error('未提供Loading状态'); } return loading; }

在应用根组件调用provideLoading()，即可在任何子组件中通过useInjectLoading()获取加载状态。

2. 动画组件的实现艺术

2.1 基础动画组件

使用Teleport实现全局覆盖的动画组件：

<template> <teleport to="body"> <transition name="fade"> <div v-if="isLoading" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50" > <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-blue-500"></div> <span v-if="text" class="ml-2 text-white">{{ text }}</span> </div> </transition> </teleport> </template> <script setup> defineProps({ isLoading: Boolean, text: String }); </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.3s; } .fade-enter-from, .fade-leave-to { opacity: 0; } </style>

2.2 高级动画配置

支持动态配置动画样式：

interface LoadingOptions { spinnerColor?: string; backgroundColor?: string; text?: string; spinnerType?: 'dots' | 'spinner' | 'bars'; zIndex?: number; } const defaultOptions: LoadingOptions = { spinnerColor: '#3b82f6', backgroundColor: 'rgba(0,0,0,0.5)', spinnerType: 'spinner', zIndex: 50 };

3. 与异步操作的完美集成

3.1 请求拦截器集成

在axios拦截器中自动管理Loading状态：

import axios from 'axios'; import { useInjectLoading } from './loading'; const loading = useInjectLoading(); axios.interceptors.request.use(config => { loading.startLoading(); return config; }); axios.interceptors.response.use( response => { loading.stopLoading(); return response; }, error => { loading.stopLoading(); return Promise.reject(error); } );

3.2 组合式函数封装

创建useAsyncWithLoading高阶函数：

export function useAsyncWithLoading(asyncFn) { const loading = useInjectLoading(); return async (...args) => { try { loading.startLoading(); return await asyncFn(...args); } finally { loading.stopLoading(); } }; }

使用示例：

const fetchData = useAsyncWithLoading(async () => { const response = await axios.get('/api/data'); return response.data; });

4. 性能优化与高级特性

4.1 防抖处理

避免频繁切换Loading状态：

import { debounce } from 'lodash-es'; const debouncedLoading = debounce((isLoading) => { // 更新UI }, 300); watch(isLoading, (val) => { debouncedLoading(val); });

4.2 多实例管理

支持同时管理多个Loading状态：

const loadingMap = ref<Record<string, boolean>>({}); const setLoading = (key: string, state: boolean) => { loadingMap.value = { ...loadingMap.value, [key]: state }; }; const anyLoading = computed(() => Object.values(loadingMap.value).some(Boolean) );

4.3 与Pinia集成

在状态管理库中统一管理：

import { defineStore } from 'pinia'; export const useLoadingStore = defineStore('loading', () => { const loadingCount = ref(0); // ...其余实现 return { isLoading, startLoading, stopLoading }; });

5. 自定义指令的妙用

创建v-loading指令实现局部加载：

import { createApp } from 'vue'; const app = createApp(); app.directive('loading', { mounted(el, binding) { const loadingEl = document.createElement('div'); loadingEl.className = 'loading-indicator'; el.loadingEl = loadingEl; if (binding.value) { el.appendChild(loadingEl); } }, updated(el, binding) { if (binding.value) { el.appendChild(el.loadingEl); } else { el.loadingEl.remove(); } } });

使用方式：

<div v-loading="isLoading">内容区域</div>

6. 类型安全与TS支持

完整的类型定义确保开发体验：

interface LoadingProvider { isLoading: ComputedRef<boolean>; startLoading: () => void; stopLoading: () => void; } interface LoadingPluginOptions { defaults?: LoadingOptions; injectKey?: symbol; } declare module '@vue/runtime-core' { interface ComponentCustomProperties { $loading: LoadingProvider; } }

7. 与Vite的深度集成

利用Vite的插件系统自动注入：

import type { Plugin } from 'vite'; export default function loadingPlugin(): Plugin { return { name: 'vite-plugin-loading', transform(code, id) { if (id.endsWith('main.ts')) { return code.replace( 'createApp(App)', `const app = createApp(App); app.use(LoadingPlugin);` ); } } }; }

8. 测试策略

8.1 单元测试示例

import { ref } from 'vue'; import { useLoading } from './loading'; describe('useLoading', () => { it('should manage loading state', () => { const { isLoading, startLoading, stopLoading } = useLoading(); expect(isLoading.value).toBe(false); startLoading(); expect(isLoading.value).toBe(true); stopLoading(); expect(isLoading.value).toBe(false); }); });

8.2 E2E测试场景

describe('Global Loading', () => { it('should show loading during API call', () => { cy.intercept('GET', '/api/data', { delay: 1000, body: { data: 'test' } }); cy.visit('/'); cy.get('button').click(); cy.get('.loading-indicator').should('be.visible'); cy.get('.loading-indicator').should('not.exist'); }); });