Suspend component and asynchronous component

• Render some extra content while waiting for asynchronous components , Let the application have a better user experience

• Use steps ：

  • Introduce components asynchronously , Use defineAsyncComponent Define asynchronous components

    import {
            defineAsyncComponent} from 'vue'
    const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
    

  • Use Suspense Package components , And configured default And fallback

    <template>
    	<div class="app">
    		<h3> I am a App Components </h3>
    		<Suspense>
    			<template v-slot:default>
    				<Child/>
    			</template>
    			<template v-slot:fallback>
    				<h3> Loading .....</h3>
    			</template>
    		</Suspense>
    	</div>
    </template>
    

    • Asynchronous component child in setup Can be defined as an asynchronous function , Using asynchronous components requires Suspense The parcel

<template>
	<div class="child">
		<h3> I am a Child Components </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})
				},1000)
			})
			return await p
		}
	}
</script>