本文主要是介绍如何优雅处理异步组件加载：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>
真实踩坑(꒦_꒦) ！
5. 适应场景
1、异步组件加载
通过 Suspense 可以更优雅地处理异步组件加载，避免白屏或突兀的加载过程，造成用户体验感过差。
2、嵌套异步组件
当一个组件内部还有异步组件时，Suspense 也可以自动处理这种嵌套关系，直到所有异步组件加载完成后才展示最终内容。
6. 注意事项
1、兼容性
Suspense 是 Vue3 的新特性，在 Vue2 中无法使用。
2、性能考虑
虽然 Suspense 可以处理异步组件加载，但在可能情况下，还是应该尽量优化加载性能，避免用户等待太久。
这篇关于如何优雅处理异步组件加载：Vue 3 的 Suspense 特性的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
