Suspense 组件
Suspense
是Vue3.2新增的内置组件,与React.Suspense
组件类似。
Suspense
有两个插槽:default
和fallback
default
插槽中存放具有深层异步依赖的组件/(异步组件)
当default
中的组件状态未变成fulfilled
(完成且未抛出异常)时,会显示fallback
插槽中的内容
1.配合defineAsyncComponent
懒加载组件
child component A
<!-- ./components/A.vue -->
<template>
<h1>hello</h1>
</template>
parent component
<script setup lang="ts">
import {defineAsyncComponent} from "vue";
const A = defineAsyncComponent(() => import('./components/A.vue'))
</script>
<template>
<Suspense>
<A/>
<template #fallback>
<p>loading...</p>
</template>
</Suspense>
</template>
2.使用async setup
child component B
<!-- ./components/B.vue -->
<script lang="ts" setup>
const getTitle = () => {
return new Promise<string>((resolve, reject) => {
setTimeout(() => {
resolve('hello')
// reject(new Error('wo wo wo ~'))
}, 3000)
})
}
// 直接在script setup 使用顶层await, vue 会使得 setup函数变成 async setup() {}
const title = await getTitle()
</script>
<template>
<h1>{{title}}</h1>
</template>
parent component
<script setup lang="ts">
import B from './components/B.vue'
</script>
<template>
<Suspense>
<B/>
<template #fallback>
<p>loading...</p>
</template>
</Suspense>
</template>
3.配合vueRouter使用
<RouterView v-slot="{ Component }">
<template v-if="Component">
<Transition mode="out-in">
<KeepAlive>
<Suspense>
<!-- 主要内容 -->
<component :is="Component"></component>
<!-- 加载中状态 -->
<template #fallback>
正在加载...
</template>
</Suspense>
</KeepAlive>
</Transition>
</template>
</RouterView>
4.错误边界
以 component B 为例 将getTitle
的resolve
改为 reject
- resolve('hello')
+ reject(new Error('wo wo wo ~'))
parent component
<script setup lang="ts">
import {defineAsyncComponent, one rrorCaptured, ref} from "vue";
const B = defineAsyncComponent(() => import('./components/B.vue'))
const errorMessage = ref<string | null>(null)
onErrorCaptured((e) => {
errorMessage.value = e instanceof Error ? e.message : (e || 'has error')
})
</script>
<template>
<Suspense>
<B/>
<template #fallback>
<p>{{ errorMessage || 'loading...' }}</p>
</template>
</Suspense>
</template>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。