应使用 Pinia 等状态管理方案统一维护 Loading 状态，配合请求拦截器自动触发启停，而非依赖 emit 跨层级广播；emit 仅适用于单层父子组件的简单场景。
在 Vue 项目中，用 emit 实现全局 Loading 控制，本身存在设计偏差——emit 是父子组件通信机制，无法天然支持跨层级、跨模块的 Loading 状态广播。真正高效且可维护的做法，是将 Loading 状态抽离为响应式状态（如 Pinia store 或 provide/inject），再结合请求拦截器统一触发与关闭，emit 仅适合局部、明确父子关系的简单场景。
Loading 状态不应依赖 emit 广播
组件通过 this.$emit('show-loading') 向上派发事件，需每一层父组件手动监听并透传，极易断裂或遗漏；多个子组件同时触发时，还可能出现状态覆盖或未关闭问题。这不是通信问题，而是状态管理边界不清的表现。
- 全局 Loading 属于应用级副作用，应由单一可信源（如 store）统一维护
- 拦截器（Axios 或 Fetch wrapper）天然知道请求开始与结束，是最合适的触发点
- UI 层（如 App.vue 或 Layout 组件）只需响应 store 中的 loading 状态，用 v-show/v-if 控制遮罩显隐
推荐方案：Pinia + 请求拦截器联动
以 Pinia 为例，定义一个 useLoadingStore：
export const useLoadingStore = defineStore('loading', {
state: () => ({ isLoading: false }),
actions: {
start() { this.isLoading = true },
done() { this.isLoading = false },
// 可选：支持嵌套请求计数，避免多次 start/done 冲突
startWithCount() {
this.count++
this.isLoading = true
},
doneWithCount() {
this.count--
if (this.count <= 0) {
this.count = 0
this.isLoading = false
}
}
}
})在 Axios 拦截器中调用：
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
立即学习“前端免费学习笔记（深入）”；
axios.interceptors.request.use(config => {
loadingStore.start()
return config
})
<p>axios.interceptors.response.use(
response => {
loadingStore.done()
return response
},
error => {
loadingStore.done()
return Promise.reject(error)
}
)若必须用 emit（如遗留代码或极简项目）
仅限单层父子且 Loading 逻辑完全归属父组件时使用：
- 子组件调用
this.$emit('loading-change', true) - 父组件监听：
@loading-change="handleLoading"，并在 data 中维护isLoading - 父组件把
:loading="isLoading"透传给全局 Loading 组件 - 注意：不能在拦截器里直接调用
emit，因为拦截器无组件实例上下文
拦截器中处理异常与竞态更关键
Loading 的体验痛点往往不在“显示”，而在“不该关的时候关了”或“该关的时候没关”。建议在拦截器中补充：
- 对 401/403 等业务错误，不自动 close loading，交由业务组件自行处理（如跳登录页）
- 为每个请求生成唯一 ID，在响应时比对是否为最新请求，防止旧请求返回后错误关闭 loading
- 超时请求主动调用
done()，避免 loading 卡死
不复杂但容易忽略。核心是把 loading 当作状态而非事件来管理，拦截器是开关，store 是中枢，UI 是视图——三者各司其职，比层层 emit 更健壮、易测、可扩展。
