Vue 3 如何处理异步操作（比如 API 请求）？

在 Vue 3 中处理异步操作，通常会使用组合式 API 中的 reactive、ref 和 onMounted 生命周期钩子，以及 computed 或 watch 来响应数据的变化。以下是一个简单的例子，展示如何在 Vue 3 组件中进行 API 请求：

<template>
  <div>
    <div v-if="error">{{ error }}</div>
    <div v-if="isLoading">Loading...</div>
    <div v-if="data">
      Data fetched successfully!
      <!-- 展示数据 -->
    </div>
  </div>
</template>
 
<script>
import { ref, onMounted, reactive } from 'vue';
import axios from 'axios';
 
export default {
  setup() {
    const state = reactive({
      data: null,
      isLoading: false,
      error: null,
    });
 
    const fetchData = async () => {
      state.isLoading = true;
      try {
        const response = await axios.get('your-api-endpoint');
        state.data = response.data;
      } catch (err) {
        state.error = err.message;
      } finally {
        state.isLoading = false;
      }
    };
 
    onMounted(fetchData);
 
    return {
      ...state,
      fetchData,
    };
  },
};
</script>

在这个例子中，我们使用 reactive 来创建响应式状态，fetchData 函数执行异步 API 请求，并在 onMounted 钩子中调用它。我们还展示了加载状态 (isLoading) 和错误处理。这是 Vue 3 推荐的组合式 API 风格，它使得逻辑可复用、更加简洁，并且易于测试。