Vue内置组件Suspense

封面图 • 2025-10-11 • Vue

在 Vue 3 中，`<Suspense>` 是一个**内置组件**，用于处理异步依赖（如异步组件加载、异步数据获取等）时的 UI 渲染控制。它允许你定义两个部分：

1. **默认内容（加载中状态）**
2. **当异步操作完成后的成功内容**

---

### 📌 基本用法

```vue
<template>
  <Suspense>
    
    <template #default>
      <AsyncComponent />
    </template>

<template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>
```

---

### ✅ 适用场景

- 异步加载组件（如动态导入组件）
- 异步获取数据后渲染内容
- 处理嵌套的异步组件

---

### 🔧 示例：异步加载组件

```js
// AsyncComponent.vue
<script setup>
import { defineProps, onMounted } from 'vue'

const props = defineProps(['id'])

onMounted(() => {
  // 模拟异步请求
  setTimeout(() => {
    console.log('数据加载完成')
  }, 2000)
})
</script>

<template>
  <div>这是异步组件，ID: {{ id }}</div>
</template>
```

```vue

<template>
  <Suspense>
    <template #default>
      <AsyncComponent id="123" />
    </template>
    <template #fallback>
      <div>正在加载组件...</div>
    </template>
  </Suspense>
</template>

---

### ⚠️ 注意事项

- `Suspense` 必须包裹一个**异步组件或异步操作**，否则不会显示 `#fallback` 内容。
- 如果你使用的是 `defineAsyncComponent` 来定义异步组件，`Suspense` 可以自动识别其加载状态。

---

### ✅ 与 `defineAsyncComponent` 结合使用

```js
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(import('./components/AsyncComponent.vue'))
    }, 2000)
  })
})
```

然后在模板中使用：

```vue
<template>
  <Suspense>
    <template #default>
      <AsyncComponent />
    </template>
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>
```

---

### 🧠 总结

| 特性 | 说明 |
|------|------|
| `<Suspense>` | Vue 3 内置组件，用于处理异步内容的加载状态 |
| `#default` | 异步内容（加载完成后显示） |
| `#fallback` | 加载中状态（异步未完成时显示） |
| 用途 | 异步组件、异步数据加载、UI 渲染控制 |

如果你有更具体的使用场景，我可以帮你进一步优化代码 😊