傑森前端

defineAsyncCompnoent

類似vue2中的路由懶加載，可以把組件異部引入。

// import HelloWorld from '@/components/HelloWorld.vue' //靜態引入
import { defineAsyncComponent } from "@vue/runtime-core"
const HelloWorld = defineAsyncComponent(() => import('@/components/HelloWorld.vue'))

Suspense

可以讓組件的setup加上synce語法回傳一個promise可以用來作時間上的處理

1. suspense是內置模板的語法不需引入
2. <template #/>與<template #fallback/>是固定的寫法
3. 可以使引入的組建setup可以加上synce就可以回傳一個promise

範例

＃組建
<script >
// import HelloWorld from '@/components/HelloWorld.vue' //靜態引入
import { defineAsyncComponent } from "@vue/runtime-core"
const HelloWorld = defineAsyncComponent(() => import('@/components/HelloWorld.vue'))
export default {
  components: {
    HelloWorld
  },
  setup() {

  }
}
</script>

<template>
  子
  <Suspense>
    <template #> 
      <!-- 真實要讀的組件 -->
      <HelloWorld></HelloWorld>
    </template>
     <template #fallback>
      <!-- 替代品 -->
      loading
    </template>
  </Suspense>
</template>

# 引入的組建 HelloWorld.vue
<script >
export default {
  async setup(props, context) { //故意等待一秒後出現
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve({ sum: 0 })
      }, 1000)
    })
  }
}
</script>

<template>
  <div>孫{{ sum }}</div>
</template>