vue3循环里异步转同步

在 Vue 3 中，当你需要在循环渲染列表时处理异步数据，可以利用 `v-for` 的特性结合 `async/await` 或者 `Promise.all` 来实现同步渲染。这通常发生在从服务器获取数据，并且需要在数据加载完成后一次性展示给用户的时候。

1. 使用 async/await:

   <template>
     <ul>
       <li v-for="item in loading ? [] : items" :key="item.id">
         {{ item.name }}
       </li>
     </ul>
   </script>

   <script>
   export default {
     data() {
       return {
         items: [],
         loading: true,
       };
     },
     async created() {
       const promises = items.map(item => fetchItem(item.id));
       await Promise.all(promises);
       this.loading = false; // 数据加载完成之后设置为false
     },
     methods: {
       async fetchItem(id) {
         const response = await fetch(`api/item/${id}`);
         return response.json();
       }
     }
   };
   </script>

2. 使用 Promise.all:

   <script>
   export default {
     data() {
       return {
         items: [],
         promises: [], // 存储每个项的请求
       };
     },
     async created() {
       for (const item of this.itemsToFetch) {
         this.promises.push(fetchItem(item.id));
       }
       const [items] = await Promise.all(this.promises);
       this.items = items;
       this.loading = false;
     },
     computed: {
       itemsToFetch() {
         // 根据实际需求计算需要异步加载的项
       }
     },
     methods: {
       async fetchItem(id) {
         // ...同上
       }
     }
   };
   </script>

在这个例子中，Vue会在数据加载完成后再更新视图，避免了闪烁和部分显示的问题。注意在处理完所有异步操作后，务必更新 `loading` 属性，使其变为 `false`，以便显示完整的结果。