Suspense组件(未完待续我看不懂了)

作用：等待异步组件时渲染一些额外内容，让应用有更好的用户体验

使用步骤

<template>
	<div class="App">
		<h3>我是App组件</h3>
		<!-- 2、使用Suspense包裹组件，并配置好default和fallback 
			default是默认要展示的内容，fallback是由于加载慢了会展示的内容
		-->
		<Suspense>
			<template v-slot:default>
				<Child />
			</template>
			<template v-slot:fallback>
				<h3>加载中...</h3>
			</template>
		</Suspense>		
	</div>
</template>
<script>
	// 网络慢的时候，异步引入会有优势，因为静态引入会一直等App组件加载后才会出现child组件
	// import Child from './child.vue'		// 静态引入组件
	
	// 1、异步引入组件
	import { defineAsyncComponent } from 'vue'
	const Child = defineAsyncComponent(() => import('./components/child'))	// 动态引入组件  异步引入
</script>

setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性(后期也可以返回一个promise实例，但需要Suspense和异步组件的配合)