统一控制全局 loading 的关键是状态集中管理、请求生命周期对齐与防错乱，采用计数器机制（非布尔值）、axios 拦截器自动触发、最小显示时长防闪动，并支持按需开启及组件级状态上报。
统一控制全局 Loading 的关键不是“让每个地方都调用一次 show/hide”，而是把加载状态变成可追踪、可聚合、可自动响应的系统行为。核心在于：状态集中管理 + 请求生命周期对齐 + 防止状态错乱。
用计数器代替布尔值，避免提前关闭
单纯用 isLoading = true/false 会出问题——比如两个请求并发，第一个很快结束并设为 false，Loading 就消失了，但第二个还在跑。正确做法是维护一个请求数量计数器：
- 每次请求发起时，计数器 +1；若原值为 0，则显示 Loading
- 每次响应（成功或失败）后，计数器 -1；若减到 0，则隐藏 Loading
- 推荐在 Pinia store 或 Vuex 中实现该逻辑，例如：
state.count和配套的startLoading()/endLoading()action - 额外加个最小显示时长（如 300ms），防止闪动：隐藏前用
setTimeout延迟执行，但仅当计数器已归零时才真正关闭
通过 Axios 拦截器自动触发，不侵入业务代码
不需要在每个 API 调用前后手动写 loading 控制。把逻辑收口到拦截器里：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 请求拦截器中判断
config.showLoading !== false，满足条件就调用store.startLoading() - 响应拦截器中统一调用
store.endLoading()，包括错误分支也必须执行 - 支持按需开启：默认 GET 不触发，提交类请求（POST/PUT/DELETE）自动启用，也可显式传
{ showLoading: true } - 避免重复触发：拦截器内做防重入检查，同一时刻只允许一个 loading 实例存在
让组件“上报”而非“接管”，解耦更干净
大型项目中，不同模块可能同时发起请求。与其让每个组件自己管 loading，不如让它向全局注册自己的状态：
- Pinia store 维护一个数组
loadingSources，存各组件的响应式引用（如ref(true)） - 组件 onMounted 时调用
addLoadingSource(ref(true))，onUnmounted 时调用removeLoadingSource - store 用
computed计算isLoading = sources.some(toValue)，自动响应任意组件状态变化 - 组件卸载自动清理，不会内存泄漏；多个组件共存时，只要有一个为 true，Loading 就保持显示
结合 UI 组件库，快速落地不造轮子
Element Plus、Ant Design Vue 等都提供现成的全屏 loading 服务，直接集成即可：
- Element Plus：用
ElLoading.service({ fullscreen: true })创建实例，.close()关闭 - Ant Design Vue：用
$message.loading('加载中...')，配合 key 手动关闭，或封装成单例管理 - 不建议直接在模板里写
v-loading控制局部区域——全局 Loading 的目标是遮罩整个视图，不是分散控制 - 样式定制统一在 service 配置中完成，比如背景透明度、文字、图标，避免各处硬编码
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
