Vue3-24-组件-异步组件的介绍

什么是异步组件

个人理解 ：
	异步组件 就是在用到这个组件的时候再进行加载，
	而不是 一上来就全部加载完成。
	即用即取的一个思想。

异步组件中使用到的方法：
defineAsyncComponent () 方法：返回一个Promise 对象;
我们在开发过程中常用到的语法格式如下：
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() =>
   import('./components/MyComponent.vue')
)

异步组件的使用案例

子组件

<template>

    <!-- 子组件 -->
    <div class="childdiv">
        
        子组件 - msg : {{ msg }}
        <br>
        
    </div>
    
</template>
    
<script setup lang="ts">

	// 引入 inject 方法
    import { ref } from 'vue'

    // 声明一个变量
    const msg = ref('这是子组件的msg变量')
 
</script>
    
<style scoped>

    .childdiv{
        width: 350px;
        border: 1px solid green;
    }

</style>

父组件

<template>

    <div class="basediv">
      
        APP.vue 中的 msg : {{ msg }}
        <br>  
     
        <!-- 引入子组件 : 异步加载的组件 ： 使用方式与普通组件一致 -->
        <ChildComponent />
    
    </div>
    
</template>
    
<script setup lang="ts">

	// 引入 provide 方法
    import { ref,defineAsyncComponent } from 'vue'

    // 常规引入子组件
    // import ChildComponent from './ChildComponent.vue';

    // 动态引入子组件
    const ChildComponent  = defineAsyncComponent( () => import ('./ChildComponent.vue'))

    // 声明父组件的一个变量
    const msg = ref('这是父组件的msg变量')

</script>
    
<style scoped>

    .basediv{
        width: 600px;
        height: 400px;
        border: 1px solid red;
    }
</style>

运行效果：

在这里插入图片描述

高级的写法（了解一下）

以下代码是官网给出的案例，可以参考一下

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
})