【6月日新计划更文活动】第27天

Suspense组件

• 等待异步组件时渲染一些后备内容，获得更好的用户体验

• 使用步骤：

  • 异步引入组件

    import { defineAsyncComponent } from 'vue'
    // import Child from './components/Child.vue' // 静态引入
    const Child = defineAsyncComponent(() => import('./components/Child.vue')) // 异步引入
    

  • 使用Suspense包裹组件，并配置好default和fallback

    <template>
      <div class="app">
        <h3>我是App组件 (祖). {{ name }} -- {{ price }}</h3>
        <Suspense>
          <template v-slot:default>
            <Child />
          </template>
          <template v-slot:fallback>
            <h3>稍等，正在加载……</h3>
          </template>
        </Suspense>
      </div>
    </template>