Vue骨架屏核心是利用生命周期精准控制显隐时机：created中发起请求并设loading为true以渲染骨架屏，mounted中禁用主请求而适配DOM操作，Vue 3推荐Suspense自动管理异步组件与fallback骨架屏。

Vue初始化时用骨架屏占位，核心是让页面在数据未就绪、DOM尚未渲染完成前，就呈现结构一致的灰色占位布局，避免白屏或突兀的加载动画。关键不在“等什么”，而在于“什么时候切”——即利用生命周期钩子精准控制骨架屏的显示与隐藏时机。

created 钩子：发起请求 + 启动骨架屏

组件实例创建完成、数据响应式已建立，但 DOM 还未挂载。这是发起 API 请求最合适的节点，也是设置 loading 状态的起点。

• 在 data 或 ref（Vue 3）中声明 loading: true
• 在 created 中调用异步获取方法，并保持 loading 为 true
• 此时模板中已可通过 v-if="loading" 渲染骨架屏组件，且不会触发 DOM 操作报错

mounted 钩子：不建议在此发起主数据请求

虽然 mounted 能访问真实 DOM，但此时若才开始拉取数据，用户已看到空白容器或闪烁的骨架屏 —— 实际上延迟了首屏感知。它更适合：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 初始化第三方库（如 ECharts、地图 SDK），需操作 DOM 的场景
• 对骨架屏做微调（例如动态计算容器高度后调整占位块尺寸）
• 监听窗口 resize，适配大屏/移动端骨架结构

Suspense（Vue 3 推荐方案）：自动接管异步边界

无需手动维护 loading 状态，把异步逻辑封装进 异步组件，由 <suspense></suspense> 统一管理过渡状态。

立即学习“前端免费学习笔记（深入）”；

• 将真实内容组件（如 ProductList.vue）改为 defineAsyncComponent 引入
• 在 <suspense></suspense> 内置 <template></template> 放置骨架屏组件
• 组件加载、错误、超时等状态均由 Suspense 自动协调，无须 watch 或事件手动同步

骨架屏组件自身不依赖生命周期，但需注意渲染时机

骨架屏应是轻量纯 CSS 结构，不执行复杂逻辑或副作用。它的存在只为“占位”和“拟形”：

• 使用 固定宽高 + background-color + border-radius 模拟图片、标题、段落
• 避免使用 v-for 渲染大量骨架项（如列表页），可静态写死 3–5 条，防止重绘开销
• 若骨架屏需响应式（如移动端只显示 2 行），可用 matchMedia 或 class 切换，而非在 mounted 中强制重排