vue3新增Suspense组件

article/2025/10/13 4:21:16

在开始介绍Vue的Suspense组件之前，我们有必要先了解一下React的Suspense组件，因为他们的功能类似。

React

React 16.6 新增了 <Suspense> 组件，让你可以“等待”目标代码加载，并且可以直接指定一个加载的界面（像是个 spinner），让它在用户等待的时候显示：

const ProfilePage = React.lazy(() => import('./ProfilePage')); // 懒加载// 在 ProfilePage 组件处于加载阶段时显示一个 spinner
<Suspense fallback={<Spinner />}><ProfilePage />
</Suspense>

Suspense 组件常常和 React.lazy 配合使用。

React.lazy 函数能让你像渲染常规组件一样处理动态引入（的组件）。

React.lazy 接受一个函数，这个函数需要动态调用 import()。它必须返回一个 Promise，该 Promise 需要 resolve 一个 default export 的 React 组件。

然后应在 Suspense 组件中渲染 lazy 组件，如此使得我们可以使用在等待加载 lazy 组件时做优雅降级（如 loading 指示器等）。

import React, { Suspense } from 'react';const OtherComponent = React.lazy(() => import('./OtherComponent'));function MyComponent() {return (<div><Suspense fallback={<div>Loading...</div>}><OtherComponent /></Suspense></div>);
}

注意：组件可以接受任意 props，包括基本数据类型，React 元素以及函数。

Vue

defineAsyncComponent 类似于 React.lazy 函数。

import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent(() => import('./components/AsyncComponent.vue'))app.component('async-component', AsyncComp)

Vue 中也有 Suspense 组件，和 React 中的类似。

const OtherComponent = defineAsyncComponent(() => import('./OtherComponent'));<template><Suspense><template #default><OtherComponent /></template><template #fallback>Loading ...</template></Suspense>
</template>