当前位置：首页 > article >正文

Vue3组件异步懒加载defineAsyncComponent

article 2024/11/30 4:42:53

前言：我是一个刚毕业不久的大专毕业生，学Vue3和使用Vue3也有一段时间了，但是对于一些Vue3的API还没有完全的都使用上。今天业务上遇到一个问题，一个vue页面文件中，import了许多其他页面的组件，差不多了50多行的import。于是我在Vue官网闲逛时，发现了defineAsyncComponent API,正好就是我需要的！！！

认识

Vue官方对这个组件的解释是：定义一个异步组件，它在运行时是懒加载的。参数可以是一个异步加载函数，或是对加载行为进行更具体定制的一个选项对象。

在我的一顿努力搜寻下，最终我明白了这个API的用法。

功能：用法和组件懒加载类似！！

演示

下面我通过一个简单的案例来说明这个组价的用法：

<template>
    <div class="EChart_Group">
      <el-row gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="15">
          <el-card>
            <div class="tit">访问量</div>
            <div class="line">
              <component :is="chartComponent('line')" />
            </div>
          </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="9">
          <el-card>
            <div class="tit">前端结业率</div>
            <div class="pie">
              <component :is="chartComponent('pie')" />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
</template>

<script setup>
const chartComponent = (val) => {
  return defineAsyncComponent(() => import(`./components/${val}.vue`))
}
</script>

在./components下正好有 line.vue 和 pie.vue。

如果使用他来解决成千上万个import，是相当好的优化：

不阻塞线程，页面加载更快。
按需加载，减少import的使用

完整配置

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./Foo.vue'),

  // 加载异步组件时使用的组件
  loadingComponent: LoadingComponent,
  // 展示加载组件前的延迟时间，默认为 200ms
  delay: 200,

  // 加载失败后展示的组件
  errorComponent: ErrorComponent,
  // 如果提供了一个 timeout 时间限制，并超时了
  // 也会显示这里配置的报错组件，默认值是：Infinity
  timeout: 3000
})

查看全文

http://www.kler.cn/a/415148.html