vue3异步组件的使用

有需要的时候再加载某组件，避免所有组件共同加载要等待的时间太长，用户体验差.使用异步组件可以优化性能。

defineAsyncComponent方法用来定义异步组件，它接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个Promise，Promise的resolve应该返回一个组件。

对于异步组件的显示，可以搭配  <Suspense>组件来使用，但是该组件还处于试用阶段没有特别稳定，官方不推荐上线项目使用<Suspense>

<template>
  <Suspense>
    <!--异步组件加载的时候，可以显示a内容（可以在此设置loading...），完成加载就显示异步组件-->
    <template #default>
      <!--这里放要展示的异步组件-->
      <AsyncCom></AsyncCom>
    </template>
    <template #fallback>
      <!--这里放还未加载好异步组件时，要显示的内容-->
      <h3>loading.................</h3>
    </template>
    </Suspense>
</template>

<script setup lang="ts" >
import {defineAsyncComponent} from "vue";
// defineAsyncComponent方法用来定义异步组件，它接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个Promise，Promise的resolve应该返回一个组件。
//直接最简单的用法：
const AsyncCom = defineAsyncComponent(()=> import('./01.setup.vue')) //import返回值就是一个promise
//为了模拟组件一直没加载好的效果，写了一个延时器
const AsyncCom =defineAsyncComponent(   () =>{
  return new Promise((resolve, reject)=>{
    setTimeout(async ()=>{
      let com:any =await import('./01.setup.vue')
      resolve(com)
    },2000)
  })
})
</script>

<style scoped>

</style>

最终效果：