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

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