vue3中的Suspense（不确定的）

---

1、介绍

Suspense组件允许应用程序在等待异步组件时渲染一些后备内容，从而创建一个平滑的用户体验。说白了就是loading效果。

---

2、示例代码

2.1、父组件

2.1.1、html部分

<template>
	<Suspense>
		<template v-slot:default>
			<AsyncComp/>
		template>

		<template v-slot:fallback>
			<h1>LOADING...h1>
		template>
	Suspense>
template>

---

2.1.2、typescript部分

import { defineAsyncComponent } from 'vue'
// 静态引入组件
// import AsyncComp from './AsyncComp.vue'
// 动态引入组件
const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))

export default {
	setup() {
		return {}
	},

	components: { AsyncComp }
}

---

2.2、子组件

2.2.1、html部分

<template>
	<h2>AsyncComp22h2>
	<p>{{msg}}p>
template>

---

2.2.2、typescript部分

export default {
	name: 'AsyncComp',
	setup () {
		// return new Promise((resolve, reject) => {
		//   setTimeout(() => {
		//     resolve({
		//       msg: 'abc'
		//     })
		//   }, 2000)
		// })
		return {
			msg: 'abc'
		}
	}
}