在 Vue 中，用 watchEffect 同步页面加载状态与遮罩层显隐，关键在于将 loading ref 作为触发源，遮罩组件通过 v-if 绑定 visible prop 实现自动同步；需统一在 watchEffect 中控制 loading 开关，配合 try/catch/finally 确保异常时关闭，并处理并发请求与页面可见性优化。
在 Vue 中，用 watchEffect 同步页面加载状态与遮罩层显隐，关键在于把“加载中”这个响应式信号（如 loading ref）作为副作用的触发源，并确保遮罩层的 v-if 或 v-show 直接绑定到它——不需要手动写逻辑判断，靠响应式联动自动完成。
遮罩层必须响应 loading 状态变化
遮罩组件（比如 <overlay :visible="loading"></overlay>）本身要设计为纯展示型：只读取 loading 值，不管理它。它的 visible prop 就是加载状态的镜像。只要 loading 是 ref 类型且被 watchEffect 修改，遮罩就会实时同步显隐。
- 避免用
v-show配合复杂计算逻辑，优先用v-if保证 DOM 完全卸载/挂载 - 遮罩样式建议用
position: fixed+z-index，避免被其他元素遮挡 - 如果遮罩需覆盖局部区域（如某个卡片），不要用
fixed，改用absolute并确保父容器position: relative
watchEffect 内统一控制 loading 的开关
所有可能触发加载的操作（如 API 请求、表单提交、路由参数变更），都应在同一个 watchEffect 中集中处理，并在开始和结束时明确设置 loading.value = true / false：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 首次执行时自动开启遮罩（组件一创建就显示加载态，适合首屏数据拉取）
- await 之后必须手动设
loading.value = false，否则遮罩不会关闭 - 加
try/catch/finally结构，确保异常时也能关闭遮罩，防止“卡死”状态
防抖与多请求竞争要额外处理
当多个操作可能并发触发同一 watchEffect（例如快速切换筛选条件），直接赋值 loading.value 会导致遮罩闪烁或状态错乱。这时需引入简单状态协调：
立即学习“前端免费学习笔记（深入）”；
- 用
ref记录当前有效请求的标识（如时间戳或唯一 key） - 在
onInvalidate中标记该次请求已失效，await返回后先比对标识再更新loading - 或者改用
ref计数器（loadingCount），每次请求开始 +1、结束 -1，loading.value = loadingCount > 0
配合页面可见性做优化
用户切到其他标签页时，document.hidden === true，此时即使 loading 为 true，遮罩也不应显示（避免干扰）：
- 监听
visibilitychange事件，document.hidden变化时暂停或恢复 watchEffect 的副作用执行 - 更轻量的做法：遮罩组件内部用
v-if="loading && !document.hidden"控制渲染 - 注意：
document.hidden不是响应式，需用onMounted+window.addEventListener手动监听并更新一个 ref
