异步包装组件

看下面这个例子

<script setup lang="ts">
// 省略部分代码

const AsyncWrapper = defineComponent({
  name: "AsyncWrapper",
  async setup(_, ctx) {
    // 获取数据
    const msg = await getMsg();
    // 调用插槽函数，并传入实参 item
    return () => ctx.slots?.default?.({ msg });
  },
});
</script>

<template>
  <AsyncWrapper v-slot="{ msg }">
    <!-- 传递 default 插槽函数，形参 item -->
    <div>{{ msg }}</div>
  </AsyncWrapper>
</template>

在当前组件中定义了一个 AsyncWrapper 组件，它是一个异步包装组件，在 setup 函数中获取数据，然后调用插槽函数，并传入实参 msg。

使用异步包装组件的主要作用是将异步数据加载逻辑封装在一个独立的组件中，这样做有以下几个潜在的好处：

1️⃣ 逻辑抽离，提高可复用性

如果你的项目中有多个地方需要类似的功能（比如获取某种数据并将其作为插槽内容传递给父组件），使用一个通用的 AsyncWrapper 可以避免重复代码，提高可复用性。

2️⃣ 组件职责单一，提升代码可维护性

将异步逻辑集中在 AsyncWrapper 中，可以让父组件的代码更加简洁，关注点也更单一。父组件只负责渲染布局，而异步数据的加载和传递则完全交由子组件处理。这样可以减少复杂度，提高代码的可读性和可维护性。

3️⃣ 异步逻辑与渲染解耦

AsyncWrapper 将异步数据加载逻辑与页面渲染逻辑解耦，使得这部分异步逻辑更容易单独测试和优化。例如，如果需要更改加载数据的方式（比如增加缓存机制或切换 API），只需要修改 AsyncWrapper 的内部实现，父组件无需感知。

4️⃣ 灵活的插槽机制

通过插槽 (v-slot)，父组件可以完全控制如何渲染异步数据。这种设计模式比直接在父组件中加载数据更加灵活，比如可以让不同的父组件传递不同的渲染逻辑，而无需更改异步逻辑。

在上方的代码中，AsyncWrapper 提供了一个默认插槽，将 item 数据暴露给父组件，父组件可以根据自己的需求渲染内容。

5️⃣ 潜在的异步状态管理

AsyncWrapper 组件还可以扩展为管理异步加载状态的组件，比如在数据加载完成之前显示一个加载动画，或者在请求失败时显示错误提示。这种逻辑封装在单独的组件中，可以避免重复实现。