如何优雅处理异步组件加载：Vue 3 的 Suspense 特性

在日常开发中，我们可能会遇到网络不佳或内容加载时间较长的情况。如果当前页面没有任何内容提示，用户的体验非常糟糕，可能会反复刷新以便加载成功。因此，我们需要给用户提供一个加载中的效果，告知用户“我在努力加载中，请稍候，不要离开！”。

1. 简单介绍

Suspense 是 Vue 3 引入的一个新特性，专门用于处理异步组件的加载。它可以让开发者在异步组件还未准备好之前，呈现一个“加载中”的状态，并在组件加载完成后，自动切换到实际内容。

2. 基本使用

Suspense 组件通过 <Suspense> 标签使用，它通常包括两个部分：

1、default 主内容：异步加载的组件

2、fallback 内容：在主内容未加载完成前展示的内容

举个 🌰

<!-- MyComponent -->
<template><div class="container"><h1>这是实际组件的内容</h1></div>
</template>

<template><Suspense><!-- 主内容 --><template #default><AsyncComponent /></template><template #fallback><h1>我在努力加载中，请稍候，不要离开！</h1></template></Suspense>
</template><script setup>
import { defineAsyncComponent } from 'vue'// 异步加载组件
const AsyncComponent = defineAsyncComponent(() => import('./components/MyComponent.vue'))
</script>

例子中，AsyncComponent 是一个异步加载的组件。当它在后台加载时，Suspense 会展示 fallback 中的内容。当组件加载完成后，fallback 中的内容会自动被 AsyncComponent 替换。

3. 事件和属性

3.1 onPending + onResolve

<Suspense> 支持 onPending 和 onResolve 事件，用于监听异步操作的状态：

- onPending：当任何一个异步组件开始加载时触发。

- onResolve：当所有异步组件加载完成时触发。

举个 🌰

<template><Suspense :onPending="handleMainContentPending" :onResolve="handleMainContentResolve"><template #default><Suspense :onPending="handleComponentAPending" :onResolve="handleComponentAResolve"><template #default><AsyncComponentA /></template><template #fallback><div>加载组件 A 中...</div></template></Suspense></template><template #fallback><div>加载主内容中...</div></template></Suspense>
</template><script setup>
import { defineAsyncComponent } from 'vue'// 定义异步组件
const AsyncComponentA = defineAsyncComponent(() => import('./components/ComponentA.vue'))
const handleMainContentPending = () => {console.log('开始加载主内容...')
}
const handleMainContentResolve = () => {console.log('主内容加载完成！')
}
const handleComponentAPending = () => {console.log('加载组件 A...')
}
const handleComponentAResolve = () => {console.log('组件 A 加载完成！')
}
</script>

3.2 timeout

<Suspense> 还支持 timeout 属性，用于指定等待异步组件加载的超时时间。如果超时，fallback 插槽会继续展示，直到加载完成。超时不会取消异步组件的加载，只是影响 fallback 的显示时间。

<Suspense timeout="3000"><template #default><AsyncComponentA /></template><template #fallback><div>Loading took too long!</div></template>
</Suspense>

4. 易错点！！

错误 🌰 实例一：

<template><Suspense><template #default><div>{{ data }}</div></template><template #fallback><div>Loading data...</div></template></Suspense>
</template><script>
import { ref, onMounted } from 'vue'export default {setup() {const data = ref(null)onMounted(() => {setTimeout(() => {data.value = 'Loaded data'}, 2000)})return { data }}
}
</script>

我们模拟 2 秒之后，data 的数据加载完成为“Loaded data”，理论上页面最开始应该展示“Loading data...”，但实际并没有。

分析一下：Suspense 组件主要用于处理异步组件的加载状态，能够在异步组件完成加载之前展示 fallback 插槽的内容，组件加载完成后，展示 default 插槽的内容。

📢📢：而代码中的 data 加载是使用 onMounted 钩子函数实现的，而不是使用异步组件。Suspense 不会监听普通的数据加载，而是专门处理异步组件的状态。

如果我们想要实现在数据加载时，显示一个加载中的提示，可以使用 Vue 的响应式系统和条件渲染。

<template><div><h1 v-if="loading">Loading data...</h1><h1 v-else>{{ data }}</h1></div>
</template><script setup>
import { ref, onMounted } from 'vue'const data = ref(null)
const loading = ref(true)const fetchData = async () => {// 模拟异步数据请求return new Promise((resolve) => {setTimeout(() => {resolve('Loaded data！')}, 2000)})
}onMounted(async () => {data.value = await fetchData()loading.value = false
})
</script>

错误 🌰 实例二：

补充知识：Suspense 支持多个异步组件的组合，直到所有异步组件加载完成后去掉 fallback 的内容。如果其中任何一个异步组件未加载完成，fallback 内容将继续展示。因此，多个异步组件加载时的延迟将取决于加载时间最长的那个组件。

<template><div class="container"><h1>这是组件ComponentA的内容</h1></div>
</template><template><div class="container"><h1>这是组件ComponentB的内容</h1></div>
</template>

<template><Suspense><template #default><AsyncComponentA /><AsyncComponentB /></template><template #fallback><h1>我在努力加载中，请稍候，不要离开！</h1></template></Suspense>
</template><script setup>
import { defineAsyncComponent } from 'vue'// 定义两个异步组件
const AsyncComponentA = defineAsyncComponent(() => import('./components/ComponentA.vue'))
const AsyncComponentB = defineAsyncComponent(() => import('./components/ComponentB.vue'))
</script>

乍一看，是不是很有道理，当 AsyncComponentA 和 AsyncComponentB 加载完成之后，展示内容，但是页面什么都没有，很奇怪。

控制台告诉我们原因：[Vue warn]: <Suspense> slots expect a single root node. 也就是 <Suspense>插槽需要一个根节点。

那就非常好解决，嵌套一层 <div> 就可以。

<template><Suspense><template #default><div><AsyncComponentA /><AsyncComponentB /></div></template><template #fallback><h1>我在努力加载中，请稍候，不要离开！</h1></template></Suspense>
</template>