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

2021-10-11 18:03:58 阅读：284 来源： 互联网

标签：异步 vue Vue3 defineAsyncComponent Suspense Child 组件

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>

标签：异步,vue,Vue3,defineAsyncComponent,Suspense,Child,组件
来源： https://blog.csdn.net/weixin_43343144/article/details/120708367

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

3.Suspense