vue 解决map循环中无法等待回调的问题

在Vue中，当你在`v-for`指令中遍历一个数组并使用`this.$set`或者动态数据绑定修改数组时，可能会遇到“Cannot read property 'map' of undefined”这样的错误，这是由于Vue的响应式更新机制在处理异步操作时的限制。

Vue并不直接支持对数组进行深度监听，所以在地图（`map()`）这类会改变原数组结构的操作时，如果数据不是立即可用的，可能导致渲染过程出错。解决这个问题的一种常见做法是使用`async/await`或`.then`来包裹异步操作：

<template>
  <div>
    <ul v-for="item in computedList">
      <li>{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      originalArray: [],
      // 使用 computed 属性去处理 map 的结果
      computedList: this.computedListFromOriginal()
    };
  },
  methods: {
    async computedListFromOriginal() {
      const newList = await new Promise((resolve) => {
        this.originalArray.map(async (element) => {
          // 这里是你的异步操作
          const processedElement = await someAsyncFunction(element);
          resolve(processedElement); // 当操作完成后，返回新的元素
        });
      });
      this.$set(this, 'computedList', newList); // 更新 computedList
    }
  }
}
</script>

这样做的原因是，我们将 `map` 操作放在了一个内部函数中，并将其包装在一个 promise 中，当所有异步操作完成后再设置 computedList，确保了视图会在所有数据准备好后进行更新。