vue3组合式API异步组件详细介绍

异步组件

1、简介

       异步组件是指以异步的方式去加载组件，这些组件不会在页面初始加载时立即加载，而是在需要渲染到DOM上的时候才加载，从而可以提高应用的加载速度和性能。

      ​ Vue提供了defineAsyncComponent()方法用来实现异步组件的功能。

2、基本用法

​ defineAsyncComponent()方法的参数是一个返回Promise的加载函数，当从服务器获取组件成功时调用resolve()，加载失败时调用reject()。加载成功之后，该方法的返回值是一个包装过的组件，使用变量接收返回值后，就可以通过变量在组件模板中使用异步加载的组件了。

<script setup>
// 导入要使用的方法
import { defineAsyncComponent } from 'vue'

// 调用方法 异步加载组件 并将加载的组件赋值给AsyncComp
const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...从服务器获取组件
    // 加载成功
    resolve(/* 获取到的组件 */)
    // 加载失败
    reject(/* 加载失败 */)
  })
})
</script>

<template>
	<div>
    <!-- 正常使用AsyncComp组件 -->
    <AsyncComp />
  </div>
</template>

3、ES模块动态导入

​       ES模块动态导入import，其实也会返回一个Promise，所以可以动态导入Vue单文件组件并与defineAsyncComponent()方法搭配使用，实现组件的异步加载。异步加载获取的是一个包装过的组件，它会将接收到的props和插槽、事件监听器等内容传递给内部加载的异步组件。

​ Vite 和 Webpack等构建工具也都支持该语法。

<template>
  <div class="index">
    <el-button type="primary" @click="isShow = true">primary页面</el-button>
    <el-button type="success" @click="isShow = false">success页面</el-button>
    <primaryPage v-if="isShow" />
    <successPagev-else />
  </div>
</template>

<script setup>
import { defineAsyncComponent, ref } from 'vue';

const isShow = ref(false);

// 第一种方式 需要 return 否则报错
const primaryPage = defineAsyncComponent(() => {
  return import('./common/primary.vue');
});

// 第二种方式 
const successPage= defineAsyncComponent({
  loader: () => import('./common/success.vue'),
  delay: 200,
});
</script>

与普通组件一样，异步组件也支持通过app.component()注册为全局组件：

// main.js 
app.component('AsyncChild', defineAsyncComponent(() =>
  import('../components/Child3.vue')
))

4、加载与错误状态

​ 既然是异步加载，那就必然会涉及到加载中和加载失败的状态，defineAsyncComponent() 方法在高级选项中提供了处理这些状态方法，包括加载状态显示、加载错误兜底展示等内容：

const AsyncComp = defineAsyncComponent({
  // 异步加载组件函数 
  loader: () => import('../components/Child3.vue'),

  // 加载中状态 展示的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms 避免加载太快导致的闪烁问题
  delay: 200,

  // 加载失败状态 展示的组件
  errorComponent: ErrorComponent,
  // 可以指定 timeout 时间限制，超时后也会显示这里配置的报错组件，默认值是：Infinity 无限
  timeout: 3000
})

欢迎转载，转载需注明地址： http://www.luowebs.com/Skill_desc/158/1091.html

很赞哦！ (0)