Vue 3中优雅展示加载遮罩层应按场景选择机制：全局阻断用自定义v-loading指令，组件级异步用<Suspense>，全屏锁定用全局遮罩组件；避免手写v-if遮罩以保证复用性与一致性。
在 Vue 3 模板中优雅展示加载中遮罩层，关键不是“堆代码”，而是选对场景、用对机制：需要全局阻断交互时用自定义指令；需要组件级异步等待时用 <Suspense>；需要简单条件切换时用 v-if + 骨架屏或 Spinner 组件。三者逻辑不同，混用反而冗余。
用 <Suspense> 处理异步组件加载（推荐用于路由/子组件）
当加载的是整个异步组件（比如通过 defineAsyncComponent 导入的页面或模块），<Suspense> 是最自然的选择。它自动捕获内部所有异步依赖（组件加载、async setup 中的 Promise），无需手动维护 loading 状态。
- 在
#default插槽放异步内容，如<AsyncReport /> - 在
#fallback插槽放骨架屏或轻量 Spinner，避免白屏和布局跳动 - 搭配骨架屏效果更佳：用灰色块模拟结构，比纯旋转动画更能稳定视觉预期
用自定义 v-loading 指令实现局部遮罩（推荐用于按钮/表单/区域）
对某个按钮、卡片或数据区域添加加载遮罩，自定义指令最简洁。它把 DOM 层级的覆盖逻辑封装好，模板里只写 v-loading="isLoading" 即可。
- 指令内部自动创建绝对定位遮罩层，覆盖目标元素并居中显示 Spinner
- 支持传参：如
v-loading="{ visible: isLoading, tip: '提交中...' }" - 避免手动写
v-if+div.mask，减少模板污染，复用性高
用 v-if + 全局遮罩组件（适合全屏阻断）
当需要锁定整个视口（例如表单提交、复杂操作流程），直接使用一个带 transition 的全局遮罩组件更可控。
立即学习“前端免费学习笔记（深入）”；
- 组件接收
visible和message，用fixed布局覆盖全屏 - 配合
<transition name="fade">实现淡入淡出，比硬切更柔和 - 注意 z-index 要足够高（建议 ≥ 9999），确保压住所有内容
不推荐在模板里反复手写 v-if="loading" <div class="mask">...</div> —— 容易遗漏样式、动画、z-index，也难统一品牌风格。优先封装成指令或组件，让“加载态”成为可配置、可复用的 UI 基础能力。
