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

3.Suspense

• 等待异步组件时渲染一些额外内容，让应用有更好的用户体验

• 使用步骤：

  • 异步引入组件

    import {defineAsyncComponent} from 'vue'
    const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
    或 
    import Child from './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来包裹使用,否则会报错！ 

<template>

    <div>{{ name + "==>" + job }}</div>

</template>

<script lang="ts">

import {defineComponent, reactive, toRefs, ref} from "vue"


export default defineComponent({
    name: "AsyncShow",
    setup() {

        let _data = reactive({
            job: "it工作者"
        })

        return new Promise((resolve) => {
            setTimeout(() => {
                /**
                 * 注意：异步组件返回resolve对象内部的属性可以直接在模板中访问！
                 */
                return resolve({
                    ...toRefs(_data),
                    name: ref("我是一个异步组件数据")
                });
            }, 5000)
        })
    }
})

</script>