这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战
对于
Vue3, 已经发布有一段时间了, 有许多新的特性还是值得学习的. 也断断续续探索过, 学习过, 但不是太系统, 也没有总结, 这里做一些学习的总结, 记录 && 积累!
之前有几篇文章有作 Vue3学习总结的开始:
本文继续来学习: 一个 Vue3 的新特性: Suspense
Suspense
!
Suspense是一个试验性的新特性， 生产环境请勿使用。
Suspense 中文文档地址: v3.cn.vuejs.org/guide/migra…
当然还可以来看英文文档了--:
Suspense 英文文档地址: v3.vuejs.org/guide/migra…
Suspense 是什么?
Suspense 异步请求好帮手, 来从一个小栗子入手:
1. 首先定义一个异步组件: AsyncShow.vue
定义一个异步组件: AsyncShow.vue 在 setup 返回一个 Promise:
/// AsyncShow.vue
<template>
<h1>{{ result }}</h1>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
return new Promise((resolve) => {
setTimeout(() => {
return resolve({
result: 213
})
}, 213)
})
}
})
</script>
2. 在 App 中使用一下:
在正确渲染组件之前进行一些异步请求是很常见的事。组件通常会在本地处理这种逻辑，绝大多数情况下这是非常完美的做法。
Suspense 中可以添加多个异步组件:
/// App.vue
<template>
<suspense>
<template #default>
<async-show />
</template>
<template #fallback>
<h1>Loading ...</h1>
</template>
</suspense>
</template>
<script lang="ts">
export default {
components: {
AsyncShow: defineAsyncComponent(() => import('./AsyncShow.vue')),
},
}
</script>
<suspense> 组件有两个插槽。它们都只接收一个直接子节点。
default插槽里的节点会尽可能展示出来。- 如果不能，则展示
fallback插槽里的节点。
重要的是，异步组件不需要作为
<suspense>的直接子节点。它可以出现在组件树任意深度的位置
另一个触发 fallback 的方式是让后代组件在 setup 函数中返回一个 Promise：
export default {
async setup() {
const data = await loadData()
return {
// ...
}
},
}
