问题记录：A component with async setup()must be nested in a in order to be rendered.

报错详情：

setup function returned a promise, but no boundary was found in the parent component tree. A component with async setup() must be nested in a in order to be rendered. 翻译： setup函数返回了一个promise，但没有边界在父组件树中找到。 具有异步setup（）的组件必须嵌套在中才能呈现。

报错原因：

如果使用<script setup>，可以在顶部直接使用await，结果代码会被编译成 async setup()。

例如子组件A：

<script setup>
import {getAllFrd} from '@/api/addfriends'
let text = await getAllFrd()
</script >

这样使用了async setup()的子组件，父组件需要和Suspense配合使用，否则子组件渲染不出来，报错warn以上内容。

解决：

父组件处理：

<script setup>
import { defineAsyncComponent } from 'vue'
const A = defineAsyncComponent(() =>
  import('@/components/A.vue')
)
// 注意：同一个组件例如A组件，只能用一种引入方式，要么 defineAsyncComponent，要么import，
//不能不同父组件一个import一个defineAsyncComponent，否则打包时粘包
</script >

<template>
  <div class="index">
    <Suspense>
      <template #default>
        <A />
      </template>
    </Suspense>
  </div>
</template>