Vue 3教程 - Suspense

动态引入组件/异步组件

JavaScript

import { defineAsyncComponent } from 'vue'

const ChilChildComponentd = defineAsyncComponent( () => import('./components/ChildComponent'))

export default {
  name: 'App',
  components: { ChildComponent }
}

但这种异步组件有一个问题：当网速慢的时候，可能只显示父组件而没有显示子组件，这样可能会给人一个错觉：子组件并不存在。

Suspense的使用

要想解决前面的问题，就可以使用Suspense。Suspense的底层实现使用了Slot。

markup

<Suspense>
  <template v-slot:default>
    <ChildComponent />
  </template>  
  <template v-slot:fallback>
    <h2>Loading...</h2>
  </template>  
</Suspense>

正是有了异步组件的概念及在父组件上的Suspense，可以在子组件的setup上使用async关键字，并在setup中返回Promise：

JavaScript

async setup() {
  let id = ref(0)
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve({ id })
    }, 5000)
  })
}