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
    评论
Vue3中,异步组件可以使用defineAsyncComponent函数进行定义。它会返回一个组件对象,可以在需要时进行动态。而Suspense组件则是用于处理异步组件时的“等待”状态,它可以显示一个自定义的“等待中”组件,直到异步组件完成并渲染出来。 具体来说,在使用defineAsyncComponent定义异步组件时,可以在组件选项中添loading选项,用于指定Suspense组件中的“等待中”组件。这样,在异步组件完成前,Suspense组件会显示loading选项指定的组件,等异步组件完成后,再渲染出异步组件。 举个例子,假设我们有一个异步组件如下: ```vue <template> <div>异步组件内容</div> </template> <script> export default { name: 'AsyncComponent', // ... 异步组件 } </script> ``` 我们可以使用defineAsyncComponent函数来定义它,并添loading选项: ```js import { defineAsyncComponent } from 'vue' const AsyncComponent = defineAsyncComponent({ name: 'AsyncComponent', loader: () => import('./AsyncComponent.vue'), loading: { template: '<div>中...</div>' } }) ``` 然后,在需要使用异步组件的地方,我们可以用Suspense组件包裹: ```vue <template> <Suspense> <template #default> <AsyncComponent /> </template> <template #fallback> <div>等待中...</div> </template> </Suspense> </template> ``` 这样,在异步组件完成前,Suspense组件会显示loading选项中的内容;完成后,就会渲染出异步组件的内容。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值