vue3中的Suspense（不确定的）

1、介绍

Suspense组件允许应用程序在等待异步组件时渲染一些后备内容，从而创建一个平滑的用户体验。说白了就是loading效果。

2、示例代码 2.1、父组件 2.1.1、html部分

<template> <Suspense> <template v-slot:default> <AsyncComp/>  defineAsyncComponent } from 'vue' // 静态引入组件 // import AsyncComp from './AsyncComp.vue' // 动态引入组件 const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue')) export default { setup() { return {} }, components: { AsyncComp } } 

2.2、子组件 2.2.1、html部分

<template> <h2>AsyncComp22{msg}} name: 'AsyncComp', setup () { // return new Promise((resolve, reject) => { //   setTimeout(() => { //     resolve({ //       msg: 'abc' //     }) //   }, 2000) // }) return { msg: 'abc' } } }