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){

    }
})

发表评论