vue3-异步组件的使用

我们通常会在实际开发中,将项目进行分包处理,以此加快项目的速度

即使用异步组件

//异步组件,分包处理
import {defineAsyncComponent} from "vue";
import Loading from "@/11_异步组件的使用/Loading";
//1.
const AsyncCategory = defineAsyncComponent(() => {
  import("./AsyncCategory")
})
 
//2.
// const AsyncCategory = defineAsyncComponent({
//   loader:()=>import("./AsyncCategory"),
//   //loader没下载下来的时候,用loadingComponent来占位
//   loadingComponent:Loading,
//   errorComponent:Error,
//   //delay:在显示loadingComponent组件之前等待多长时间
//   delay:2000,
//   /*
//   * err是错误信息
//   * retry:是一个函数,调用retry尝试重新加载
//   * attempts:调用retry的次数
　　　　fail:一个函数,失败后直接退出

//   * */
//

  onError(error, retry, fail, attempts) {
    if (error.message.match(/fetch/) && attempts <= 3) {
      // 请求发生错误时重试，最多可尝试 3 次
      retry()
    } else {
      // 注意，retry/fail 就像 promise 的 resolve/reject 一样：
      // 必须调用其中一个才能继续错误处理。
      fail()
    }
  }

//
//
//
// })

export default {
  name: "App",
  components: {
    Loading,
    Home,
    AsyncCategory
  }
}