vue3 Suspense内置组件的使用

原创已于 2022-08-19 13:57:16 修改 · 433 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

于 2022-08-09 11:20:04 首次发布

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用Suspense组件实现页面加载时的占位效果，并通过一个子组件示例展示了如何处理异步数据获取的过程。文章还讨论了何时使用Suspense组件更为合适。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<Suspense>
 	// 加载时候的占位是什么
      <template #fallback>
      // 这里什么都可以图片还是文字都随你
        <img :src="loadingJPG" class="w-[80px] h-[80px]  object-cover rounded mt-1" alt=""/>
      </template>
      <template #default>
        <AsyncComponent/>
      </template>
 </Suspense>
<script lang="ts" setup>
	import AsyncComponent from "@/components/async.vue"
	import loadingJPG from "@/assets/g.jpg";
</script>

来到组件中，因为setup在以前的created之前所以这个时候dom元素还没有渲染，所以这时候你需要东西占位
所以Suspense这个提案就有了！多说一句，如果你不需要在顶层使用await和async 就不必要使用Suspense

这是子组件
<template>
  <div>
    <div>{{ result.age }}</div>
    <div>{{ result.name }}</div>
  </div>
</template>

<script lang="ts" setup>
import {subMitForm} from "@/type/types";
async function queue() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({name: "gq", age: 25,})
    }, 2000);
  });
}
let result: subMitForm = reactive({
  name: "",
  age: "",
});
let {name, age} = await <any>queue();
result.name = name;
result.age = age;
</script>