Vue3中实现异步组件

Vue3中实现异步组件

Vue3中实现异步组件

• 如果我们的项目过大了，对于某些组件我们希望通过异步的方式来进行加载（目的是可以对其进行分包处理），那么Vue给我们提供了一个函数：defineAsyncCompoent.
• defineAsyncCompoent 接受两种类型的参数

1. 类型一 工厂函数，该工厂函数需要返回一个Promise对象
2. 类型二 接受一个对象类型，对异步函数进行配置

示例一（第一种写法）

<template>
  <div>
    <Ansyc></Ansyc> // 这是子组件
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";
const Ansyc = defineAsyncComponent(() => import("./views/one.vue"));
export default {
  components: { Ansyc },
};
</script>

示例二（第二种写法）

<template>
  <div>
    <Ansyc></Ansyc>
  </div>
</template>

<script>
import { defineAsyncComponent } from "vue";
import loding from "./views/loding.vue";
import error from "./views/loding.vue";

const Ansyc = defineAsyncComponent({
  loader: () => import("./views/one.vue"),
  loadingComponent: loding, // 当loader没有加载好 所显示的组件
  errorComponent: error, // 当组件请求失败 所显示的组件
  delay: 2000, // 等待2s 如果loader所引入的组件在2s内没有加载好那么就显示 loding组件或者error组件
  /**
   * err：错误信息
   * retry：函数，调用retry尝试重新加载
   * attempts：记录尝试次数
   */
  onError: function (err, retry, attempts) {},  // 用来监听异步组件加载失败
});
export default {
  components: { Ansyc, loding, error },
};
</script>