vue3内置组件（Suspense组件）-可在网速缓慢时或子组件返回对象是promise对象时异步加载组件。

一、Suspense组件(异步组件）

vue3实验中， api可能会发生变化。可在网速缓慢时或子组件返回对象是promise对象时异步加载组件。

app.vue

<style>
	.app{
		padding:20px;
		background:black;
	}
</style>

<template>
	<div class="app">
		<h3>我是App组件</h3>
		<Suspense> //底层使用插槽实现
			<template v-solt:default>
				<Child/>
			</template>
			<template v-solt:fallback>
				<h3>稍等加载中......<h3/>
			</template>
		</Suspense>
	</div>
</template>

<script>
	// import Child from './components/Child' //静态引入
	import {defineAsyncComponent} from 'vue'
	const Child = defineAsyncComponent(()=>import('./components/Child')) // 异步引入or动态引入
	export default{
		name:'App',
		components:{Child},
	}
</script>

Child.vue

<style>
	.Child{
		padding:20px;
		background:blue;
	}
</style>

<template>
	<div class="Child">
		<h3>我是Child组件</h3>
		{{sum}}
	</div>
</template>

<script>
	import {ref} from 'vue'
	export default{
		name:'Child',
		async setup(){
			let sum = ref(0)
			let p = new Promise((resolve,reject)=>{
				setTimeout(()=>{
					resolve({sum})
				}, 3000)
			})
			return await p
		},
	}
</script>