vue3 使用defineAsyncComponent 动态加载组件

news2024/11/13 21:58:23

问题场景

在项目中使用静态加载组件基本能覆盖80%的场景了，如下图

但是我们在需要 循环生成一些的component 的时候或者在 开发ssr服务端渲染的页面 就会遇到有些组件以静态方式导入就会报错，导致进程失败，那么这时候就需要用到动态组件。那么怎么去实现动态使用呢？

一、defineAsyncComponent 函数

Vue 提供了 defineAsyncComponent 方法来实现此功能，该方法接收一个返回 Promise 的加载函数。这个 Promise 的 resolve 回调方法应该在从服务器获得组件定义时调用，也可以调用 reject表明加载失败。ES 模块动态导入也会返回一个 Promise，所以多数情况下我们会将它和 defineAsyncComponent 搭配使用。

components: {
  QRCodeVue3: defineAsyncComponent(() =>{
    return import('../../../../node_modules/qrcode-vue3');
  }
  )
}

二、加载与错误状态

我们也可以传入一个完整的选项对象，该对象配置了几个更高级的参数。

const AsyncPopup = defineAsyncComponent({
  loader: () => import('./ArticleList.vue'),
  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 加载失败时使用的组件
  errorComponent: ErrorComponent
  // 在显示加载组件之前延迟。默认值：200ms。
  delay: 1000,
  // 超过给定时间，则会显示错误组件。默认值：Infinity。
  timeout: 3000
})

一般默认就已足够。

三、延迟加载组件

我们简单的模拟请求文章数据的 ArticleList.vue 组件：

// ArticleList.vue
<template>
  <div> {{ article }} </div>
</template>

<script setup>
// API call
const getArticleInfo = async () => {
  await new Promise(resolve => setTimeout(resolve, 1000))
  const article = {
    title: 'Vue3 中使用 defineAsyncComponent 延迟加载组件',
    author: 'chaoyang'
  }
  return article
}

const article = await getArticleInfo()
</script>

我们使用 defineAsyncComponent 延迟加载组件，并使用 Suspense 元素包装这个组件：

<template>
  <button @click="show = true"> Login </button>
  <Suspense v-if="show">
    <template #default>
      <ArticleList  />
    </template>
    <template #fallback>
      <p> Loading... </p>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const ArticleList = defineAsyncComponent(() => import('@/components/ArticleList.vue'))
const show = ref(false)
</script>

默认情况下，我们使用 defineAsyncComponent 定义的所有组件都是可挂起的。这意味着，如果组件的父链中存在 Suspense，它将被视为该 Suspense 的异步依赖项。我们的组件加载、错误、延迟和超时选项将被忽略，而将由 Suspense 处理。今天就分享到这里啦！

欢迎在评论区交流。如果文章对你有所帮助，❤️关注+点赞❤️鼓励一下！博主会持续更新。。。。

我的博客：前端小阳仔_Html,CSS,JavaScript,Vue,React,Angular领域博主