vue3之非同步組件defineAsyncComponent 使用無效？

原文地址：我的稀土掘金

介紹：defineAsyncComponent 用於拆分應用為更小的塊，並僅在需要時再從伺服器載入相關組件

官網案例

<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPage = defineAsyncComponent(() =>
  import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>

結果展示

大致意思：無法讀取未定義的屬性

列印一下這個非同步組件和普通組件的值

輸出的值區別不大

再看官網

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...從伺服器獲取組件
    resolve(/* 獲取到的組件 */)
  })
})
// ... 像使用其他一般組件一樣使用 `AsyncComp`

這種寫法是沒有問題的，但是有return 導出該數據

最後改造

<script setup>
import { defineAsyncComponent } from 'vue'

const AdminPage = defineAsyncComponent(() =>
  return import('./components/AdminPageComponent.vue')
)
</script>

<template>
  <AdminPage />
</template>

結果

官網上非同步組件，存在代碼疏漏，import 前需要return才會生效