【Vue3】之异步组件Suspense和defineAsyncComponent结合的使用方法总结

- 日理万妓 2022-09-15 12:21 230阅读 0赞

## 3.Suspense ##

*  等待异步组件时渲染一些额外内容，让应用有更好的用户体验
 *  使用步骤：
    
     *  异步引入组件
        
            import {defineAsyncComponent} from 'vue'
            const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
     *  使用`Suspense`包裹组件，并配置好`default` 与 `fallback`
        
            <template>
              <div class="app">
                <h3>我是App组件</h3>
                <Suspense>
                  <template v-slot:default>
                    <Child/>
                  </template>
                  <template v-slot:fallback>
                    <h3>加载中.....</h3>
                  </template>
                </Suspense>
              </div>
            </template>

**4、当使用async setup时,则此组件为异步组件,则外部必须使用defineAsyncComponent方法来引入,且必须配合Suspense来包裹使用,否则会报错！ **

//Child.vue组件
    
    
    <template>
        <div>我是Child异步组件中的{
       {num}}</div>
    </template>
    
    <script>
        import {ref} from "vue"
    
        export default {
            name: 'Child',
            async setup() {
                let num = ref(0)
                return await new Promise((resolve) => {
                    setTimeout(() => {
                        resolve(num)
                    }, 3000)
                })
            }
        }
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，230人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 3 中的 Suspense 是什么？如何使用它

Vue 3 中的 Suspense 是什么？如何使用它 ![在这里插入图片描述][3298d448c9db44f2878663853f8d254b.png] 介绍

男娘i/ 2023年10月14日 14:13/ 0 赞/ 16 阅读

相关 35 Vue3异步组件

\[组件\]Vue3异步组件和 Promise 讲解阐述编写基本代码和同步组件 vue3中的异步组件阐述这节我们要讲明白Vue中的异步组

我就是我/ 2023年10月06日 20:41/ 0 赞/ 14 阅读

相关 Vue3 用户体验的增加：异步组件与 Suspense 组件

> 作者：Matt Maribojoc > 译者：前端小智 > 来源：stackabuse > 有梦想，有干货，微信搜索【大迁世界】关注这个在凌晨还在刷碗的刷碗智

Dear 丶/ 2023年01月22日 09:00/ 0 赞/ 4 阅读

相关 Vue3 异步组件的使用

> Vue3 中使用 defineAsyncComponent 定义异步组件，配置选项 component 替换为 loader ，用法如下： <template>

妖狐艹你老母/ 2022年12月24日 11:57/ 0 赞/ 205 阅读

相关【Vue3】之异步组件Suspense和defineAsyncComponent结合的使用方法总结

3.Suspense 等待异步组件时渲染一些额外内容，让应用有更好的用户体验使用步骤：异步引入组件

- 日理万妓/ 2022年09月15日 12:21/ 0 赞/ 231 阅读

相关【Vue】—异步组件

【Vue】—异步组件一、组件引入方式：提前引入 import CompA from './components/CompA.vue'

梦里梦外;/ 2022年09月11日 12:29/ 0 赞/ 259 阅读

相关关于 defineAsyncComponent 延迟加载组件在 vue3 中的使用总结

![259a7ece2190f4e2f845db8917262913.png][] 原文 | https://learnvue.co/2021/06/lazy-load-co

r囧r小猫/ 2022年09月10日 00:24/ 0 赞/ 330 阅读

相关 Vue.js 中使用defineAsyncComponent 延迟加载组件

![0894fb8e8b455772e99e87fce7ef4a34.png][] 原文 | https://learnvue.co/2021/06/lazy-load-co

超、凢脫俗/ 2022年09月09日 14:43/ 0 赞/ 258 阅读

相关 JavaScript之异步构造方法总结【异步构造函数 - 构造函数与Promise的结合】

JavaScript默认的构造函数只能执行同步代码, 无法执行异步代码，构造函数异步的实现原理参考：异步构造函数 - 构造函数与Promise的结合参考：[ht

爱被打了一巴掌/ 2021年08月13日 19:26/ 0 赞/ 664 阅读

相关 vue3.0 Suspense悬挂异步组件、定义异步组件

1、导入异步组件方式一: 若组件setup返回的是一个Promise对象,则该组件默认为异步组件,导入时使用defineAsyncCompone

约定不等于承诺〃/ 2021年07月24日 22:50/ 0 赞/ 581 阅读