Vue3学习记录——(7) 异步加载defineAsyncComponent与Suspense组件

一、defineAsyncComponent

1、用法一
<template>
  <div>
    <AsyncComp />
  </div>
</template>

<script setup lang="ts">

import { Component, defineAsyncComponent } from 'vue';
const AsyncComp = defineAsyncComponent<Component>(() => import("@/components/HelloWorld.vue"))

</script>
1、用法二
<template>
  <div>
    <AsyncComp />
  </div>
</template>

<script setup lang="ts">
import { Component, defineAsyncComponent } from 'vue';
import Loading from "@/components/Loading.vue"
import Error from "@/components/Error.vue"

const AsyncComp = defineAsyncComponent<Component>({
  /* 延迟3秒后加载组件 */
  loader: () => (
    new Promise(r => {
      setTimeout(() => r(import("./AboutView.vue")), 3000)
    })
  ),
  /* 加载中展示的组件 */
  loadingComponent: Loading,
  /* 加载失败展示的组件 */
  errorComponent: Error,
  /* 在展示加载中组件之前的延时(毫秒) */
  delay: 200,
  /* 设置加载超时时间(注:超时后加载的组件还是会加载出来) */
  timeout: 1000,
  /* 异常回调 error-异常信息 retry-重试函数 fail-终止函数 attempts-重试次数 */
  onError(error, retry, fail, attempts) {},
})
</script>

二、Suspense

<template>
  <Suspense>
  	//要加载的组件
    <component :is="asyncComp" />
    //加载中展示的组件
    <template #fallback>
      <div>加载中...</div>
    </template>
  </Suspense>
</template>

<script setup lang="ts">
import { Component, defineAsyncComponent } from 'vue';

//模拟创建一个3秒延时的异步组件
const asyncComp = defineAsyncComponent<Component>(() => (
  new Promise(r => {
    setTimeout(() => {
      r(import("@/components/HelloWorld.vue"))
    }, 3000);
  })
))

</script>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值