Vue3内置组件如何使用 处理异步组件加载的占位

Suspense 是 Vue 3 内置组件，用于声明式处理异步组件加载的占位展示；必须直接包裹异步组件，并同时提供 #default 和 #fallback 插槽，支持骨架屏等高级方案且自动协调加载状态。

Suspense 是 Vue 3 提供的内置组件，专为处理异步组件加载时的占位展示而设计。它不手动控制 loading 状态，而是通过声明式插槽自动协调“加载中”与“加载完成”两个阶段，让页面过渡更自然、代码更简洁。

必须满足的结构要求

使用 Suspense 时，有几点硬性规则不能跳过：

1. 异步组件必须是 <Suspense> 的直接子元素，不能嵌套在 div 或其他容器里
2. 必须同时提供 #default 和 #fallback 两个具名插槽
3. 异步组件需通过 defineAsyncComponent() 定义，或内部 setup 返回 Promise（如含 await）

基础写法示例

这是最常用也最推荐的写法，清晰且无副作用：

<template><Suspense><template #default><AsyncUserProfile /></template><template #fallback><div class="skeleton-profile"></div></template></Suspense></template><script setup>import { defineAsyncComponent } from 'vue'const AsyncUserProfile = defineAsyncComponent(() => import('./components/AsyncUserProfile.vue'))</script>

支持骨架屏等高级占位方案

比起简单文字提示，“骨架屏”能保持布局稳定、提升感知速度。Suspense 天然适配这类方案：

1. 在 #fallback 中写一个结构相似的灰色占位组件，CSS 控制宽高和动画
2. 无需监听 loading 状态或手动切换，Suspense 自动接管整个生命周期
3. 多个异步组件共存时，Suspense 会等待全部 resolve 后才切换到 default 插槽

常见错误避坑点

实际开发中容易踩的几个坑：

1. 忘记包裹 <Suspense> —— 异步组件会渲染为空白，控制台报 warning
2. 把异步组件放在 div 里再塞进 Suspense —— fallback 不触发，因为不是直接子级
3. 只写 #default 没写 #fallback —— 默认 fallback 为空，页面看起来像“闪一下”
4. 在 #fallback 里放太多交互逻辑 —— 它只是占位 UI，不该承担业务功能