异步组件Suspense

异步组件

由于vue是单页面应用，但很多时候加载大量的代码会因为请求还没有完成导致页面出现空白的情况，这时候我们想在数据请求加载之前显示一些其他提示内容而不是空白。等页面加载完成之后在渲染数据。

此时我们就可以使用异步组件，主要涉及两个关键词 defineAsyncComponent和Suspense

子组件A.vue，axiso请求数据并渲染

<template>
    <div>
        <div v-for="(item,index) in list" :key="index">
        <tr>{{item.name}}</tr>
        </div>
    </div>
</template>

<script setup lang="ts">
import {axios} from './server'
async getList(){
	const list = await axios('./data.json'); 
	return list;
}

console.log(list);

父组件content.vue使用A.vue

<template>
    <div>
<!--使用Suspense + 插槽,当没有异步请求没有完成的时候，进入fallback插槽，完成则进default-->
        <Suspense>
            <template #default>
                <A />
            </template>
            <template #fallback>
                loading...
            </template>
        </Suspense>
    </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
//这里注意使用defineAsyncComponent异步引入
const A = defineAsyncComponent(() => import('./A/index.vue'))


</script>