面试题：Vue中计算属性处理异步数据更新，如何在计算属性中调用异步函数

Question

在Vue项目中，有一个计算属性需要依赖异步获取的数据，比如通过API调用获取的数据。请描述如何在计算属性中处理这种异步情况，使其能正确更新视图，并且给出简单的代码示例。

Answer 1

1. 方法一：使用 watch 结合 computed
   • 思路：通过 watch 监听异步数据的变化，当异步数据更新时，触发计算属性重新计算。
   • 代码示例：

<template>
  <div>
    <p>{{ asyncComputedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asyncData: null
    };
  },
  created() {
    // 模拟异步获取数据
    setTimeout(() => {
      this.asyncData = '异步获取的数据';
    }, 1000);
  },
  watch: {
    asyncData: {
      immediate: true,
      handler() {
        // 当 asyncData 变化时，计算属性会重新计算
        this.$forceUpdate();
      }
    }
  },
  computed: {
    asyncComputedValue() {
      return this.asyncData? `处理后的结果: ${this.asyncData}` : '等待数据...';
    }
  }
};
</script>

2. 方法二：使用 Promise 和 async/await
   • 思路：在计算属性中返回一个 Promise，在 created 或 mounted 钩子函数中异步获取数据并解析 Promise，更新数据后视图会自动更新。
   • 代码示例：

<template>
  <div>
    <p>{{ asyncComputedValue }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      asyncComputedPromise: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        // 模拟异步获取数据
        const response = await new Promise((resolve) => {
          setTimeout(() => {
            resolve('异步获取的数据');
          }, 1000);
        });
        this.asyncComputedPromise = Promise.resolve(`处理后的结果: ${response}`);
      } catch (error) {
        this.asyncComputedPromise = Promise.reject(error);
      }
    }
  },
  computed: {
    asyncComputedValue() {
      return this.asyncComputedPromise || '等待数据...';
    }
  }
};
</script>