VUE3之Component（三）

异步组件

webpack的分包方式：在引用一个自己写的文件时，使用import函数而非直接使用import关键字，可以使得webpack打包时将引用的文件单独打包为一个文件：

// 通过import函数导入的模块，后续webpack对其打包时会进行分包的操作
import("./12_异步组件的使用/utils/math").then((res)=>{
    console.log(res.sum(20,13));
})

定义异步组件：

使用vue3中的defineAsyncComponent方法，

import {defineAsyncComponent} from "vue";

该方法的返回值是一个组件，使用方式有两种，一种是传入一个工厂方法：

// 传入工厂函数
// const AsyncCategory = defineAsyncComponent(()=>import("./AsyncCategory.vue"));;

还有一种是传入一个对象，在对象中可以定义其它的属性：

const AsyncCategory = defineAsyncComponent({
    loader: ()=>import("./AsyncCategory.vue"),
    // 加载之前的占位组件
    loadingComponent: Loading,
    // 加载错误的组件
    // errorComponent:
    // 延迟显示：在显示loadingComponent组件之前，等待多长时间
    delay: 2000,
    /**
     * err:错误信息
     * retry：函数，调用retry尝试重新加载
     * attempts：记录尝试次数
     */
    onError: function(err,retry,attempts){

    }
})