vue3+ts 循环中异步转同步

在Vue3中使用TypeScript，当在循环（如`v-for`）中遇到异步操作（例如API请求、计算属性等），通常我们会想要将这些异步操作转换为同步，以便在渲染期间数据可以稳定下来，避免组件频繁更新。这可以通过以下几种方法实现：

1. 使用`async/await`和`Promise.all()`：如果每个循环项的操作都是独立的，你可以为每个item创建一个Promise，并在`setup`生命周期钩子中使用`await Promise.all([...promises])`等待所有操作完成。

<template>
  <div v-for="(item, index) in fetchedData" :key="index">
    <!-- item 数据会在 await 后处理完 -->
    <p>{{ processItem(item) }}</p>
  </div>
</template>

<script setup>
import axios from 'axios';

const fetchData = async () => {
  const promises = items.map(async (item) => {
    // 异步操作
    return await axios.get('api/item', { params: { id: item.id } });
  });

  const data = await Promise.all(promises);
  // 在这里处理并赋值给 fetchedData
  const processedData = data.map(processApiResponse);
  setFetchedData(processedData);
};

// 示例中的过程函数
function processApiResponse(response) {
  return response.data;
}
</script>

2. `vue-async-computed`插件：这是一个用于处理异步计算属性的库，它允许你在模板中直接使用异步结果，而不会触发多次更新。

3. 管道（Pipes）：如果数据转换不是非常复杂，也可以考虑使用自定义的管道（比如通过`v-if`结合`v-model`来延迟绑定直到数据可用）。