一、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>({
loader: () => (
new Promise(r => {
setTimeout(() => r(import("./AboutView.vue")), 3000)
})
),
loadingComponent: Loading,
errorComponent: Error,
delay: 200,
timeout: 1000,
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';
const asyncComp = defineAsyncComponent<Component>(() => (
new Promise(r => {
setTimeout(() => {
r(import("@/components/HelloWorld.vue"))
}, 3000);
})
))
</script>