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

- 日理万妓 2022-09-15 12:21 185阅读 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 条评论，185人围观）

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

相关阅读

相关 Vue.js中的动态组件和异步组件

Vue.js中的动态组件和异步组件在Vue.js中，动态组件和异步组件是两个常用的技术，用于处理动态加载和渲染组件的需求。虽然它们都可以实现动态加载和渲染组件的功能，但

向右看齐/ 2024年03月16日 14:52/ 0 赞/ 54 阅读

相关【Vue3基础】组件保持存活、异步加载组件

一、组件保持存活 1、需求描述点击按钮跳转到其他组件后，原组件不会被销毁 2、知识整理 1）组件生命周期创建期：beforeCreate、created 挂载期

柔情只为你懂/ 2023年10月14日 11:13/ 0 赞/ 19 阅读

相关 Vue3 异步组件的使用

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

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

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

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

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

相关【Vue】—异步组件

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

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

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

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

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

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

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

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

相关 Vue.js之组件异步加载

当项目中组件特别多的时候，通过webpack打包的组件非常多，如果在访问其中某一个路由对应的组件时，加载了所有组件的文件，对于性能的消耗是非常浪费的。此时，我们就需要使用

深碍√TFBOYSˉ_/ 2022年05月14日 13:08/ 0 赞/ 419 阅读

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

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

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

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

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

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