直接用css动画做loading不够用，因其仅视觉动而无法反映真实请求状态（如超时、中断、空数据），骨架屏需与请求生命周期对齐，结构一致、状态可控、避免布局抖动。
为什么直接用 CSS 动画做 loading 不够用
因为纯动画只是“看起来在动”，用户无法感知数据是否真在加载、卡在哪一步、失败了有没有反馈。真实场景中，fetch 或 axios.get 可能挂起几秒，接口超时、网络中断、返回空数据都得有对应状态分支——骨架屏只是 loading state 的视觉层，背后必须和请求生命周期对齐。
常见错误现象：useEffect 里发请求但没设 loading = true；或者设了却忘了在 catch 里重置；又或者骨架屏 DOM 渲染后，真实内容插入时发生布局抖动。
- 使用场景：列表页（如商品流）、详情页（含图文混排）、表单提交后的等待反馈
- 关键点：骨架屏结构要和真实 DOM 结构一致（比如同级有 3 个
.card，骨架就得渲染 3 个.skeleton-card） - 性能影响：避免用大量
div模拟骨架；优先用伪元素 +background-image: linear-gradient实现渐变灰块，减少重排
React 中用 useState 控制 loading state 的最小可行写法
不要封装成自定义 Hook 一开始——容易把 error、data、loading 搞成互相覆盖的状态机。先用最直白的三变量控制，逻辑才清晰。
const [loading, setLoading] = useState(false);
const [data, setData] = useState(null);
const [error, setError] = useState(null);
useEffect(() => {
setLoading(true);
fetch('/api/items')
.then(res => res.json())
.then(setData)
.catch(setError)
.finally(() => setLoading(false));
}, []);
注意：finally 必须调用，否则 loading 可能永远为 true；setError 传的是原生 Error 对象或字符串，别传 null，否则后续判断 error && ... 会失效。
- 参数差异：如果用
axios，catch拿到的是error.response，不是原生error.message - 容易踩的坑：在
setState前没清空旧data，导致 skeleton 和旧数据同时存在 - 兼容性：
finally在 IE 中不支持，需加 polyfill 或改用then(() => setLoading(false), () => setLoading(false))
纯 HTML/CSS 骨架屏怎么避免重绘和 FOUC
骨架屏不是“先占位再替换”，而是“同一套结构，切换 class”。DOM 节点复用才能避免 layout shift（尤其是 iOS Safari 下滚动错乱）。
<div class="content"> <div class="skeleton active"></div> <div class="real hidden"></div> </div>
用 .active 和 .hidden 切换显示，而不是 innerHTML = '' 后重写整个结构。CSS 里用 opacity: 0.6 + background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) + background-size: 200% 100% + animation: loading 1.5s infinite 就够用。
- 使用场景：服务端渲染（SSR）页面，首屏必须立即出骨架，不能等 JS 加载完
- 性能影响：不用 JS 控制显隐，纯靠 class 切换，CSSOM 更新比 DOM 更新快得多
- 容易踩的坑：给
.skeleton设了固定height，但真实内容高度不同，导致底部留白或遮挡
Vue 3 的 v-if 和 v-show 在 loading 场景下怎么选
v-if 会销毁/重建组件实例，适合数据结构复杂、带内部状态的子组件；v-show 只切 display: none，适合纯展示型骨架或静态内容。
错误做法：对一个 <productlist></productlist> 组件用 v-show 控制 loading 态，结果骨架和真实列表共存，DOM 节点翻倍，内存泄漏风险上升。
- 正确组合：
v-if="loading"渲染<skeletonlist></skeletonlist>，v-else-if="error"渲染错误提示，v-else渲染<productlist></productlist> - 参数差异：Vue 3 的
onMounted里发请求，别在setup顶层执行，否则 SSR 会报错 - 兼容性：如果用了
defineAsyncComponent异步加载组件，它的loading插槽只管组件加载，不管 API 数据加载，别混用
真正难的不是画几个灰色方块，是让骨架的宽度、行高、边距和真实内容像素级对齐，以及在数据流中断时，骨架不残留、错误不静默、loading 状态不卡死——这些细节全藏在请求发起和响应收尾的那两行 setLoading 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
