在 Vue 3 中，我们可以使用 Suspense 组件来优 - Pretender - 沸点 - 掘金

前端

#每天一个知识点# 在 Vue 3 中，我们可以使用 Suspense 组件来优雅地处理异步组件的加载和错误处理。具体来说，我们可以将异步组件包裹在 Suspense 组件中，并在 Suspense 组件中设置一个自定义的占位符。当异步组件正在加载时，页面会显示自定义的占位符，直到异步组件加载完成并成功渲染后，才会显示异步组件的内容。

html
<template>
<div>
<suspense>
<template #default>
<AsyncComponent />
</template>
<template #fallback>
<div>Loading...</div>
</template>
</suspense>
</div>
</template>

<script>
import { defineAsyncComponent } from 'vue';

const AsyncComponent = defineAsyncComponent({
loader: () => import('./AsyncComponent.vue'),
delay: 200,
timeout: 3000,
errorComponent: () => import('./AsyncComponentError.vue'),
suspensible: false
});

export default {
components: {
AsyncComponent
}
}
</script>
在上面的示例中，我们将异步组件 AsyncComponent 包裹在 Suspense 组件中，并设置一个自定义的占位符 Loading...。当异步组件正在加载时，页面会显示占位符，直到异步组件加载完成后，才会显示异步组件的内容。
需要注意的是，为了使 Suspense 组件正常工作，异步组件需要满足一些条件。具体来说，异步组件需要使用工厂函数或者动态 import() 语法来加载，同时需要返回一个 Promise 对象或者一个包含 render 方法的对象。

展开

技术交流圈