[Vue3] Async component

Component也可以是非同步的。

只要在Setup前面加上 async ，這個 component 就是非同步的。

但是在加上async後的component，在頁面載入後發現頁面變成空白的，研究一下發現可以在父元件加上 suspense ，就可以正常運作了。範例如下：

// App.vue
<template>
   <Suspense>
      <MyAsyncComponent />
   </Suspense>
</template>
<script>
import MyAsyncComponent from "./components/MyAsyncComponent.vue";
export default {
   name: "App",
   components: {
      MyAsyncComponent,
   },
};
</script>
// MyAsyncComponent.vue
<template>
   <p>{{ data }}</p>
</template>

<script>
import { ref } from "vue";
export default {
   name: "MyAsyncComponent",
   async setup() {
      const data = ref(null);
      await new Promise((r) => {
         setTimeout(r, 2000);
         data.value = 'test';
      });
      return {
         data,
      };
   },
};
</script>

另外也可以自訂fallback內容：

<Suspense>
   <template #default>
      <MyAsyncComponent />
   </template>
   <template #fallback>
      <span>頁面載入中，請稍候...</span>
   </template>
</Suspense>