axio请求的数据在onMounted可以拿到数据本身，但是在setup()中拿到为代理对象

Question

axio请求的数据在onMounted可以拿到数据本身，但是在setup()中拿到为代理对象

Answer 1

土豆不爱敲代码 晚上好🌙🌙🌙
本答案参考通义千问

在 Vue3 的 Composition API 中，setup() 函数是在组件实例被创建之前执行的，此时响应式数据尚未绑定到 this 上。当你在 setup() 中使用 Axios 进行异步请求时，获取的数据会是 Vue 代理后的响应式对象。

这是因为 Vue3 使用了 Proxy 对象来实现响应式数据系统，任何在 setup() 中声明或修改的数据都会自动转换为响应式的。

解决方案如下：

1. 使用 ref 或 reactive 创建响应式数据： 在 setup() 中首先需要创建一个 ref 或 reactive 来存储 Axios 请求返回的数据。

import { ref, onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const data = ref(null); // 创建一个 ref 类型的响应式数据

    onMounted(async () => {
      const response = await axios.get('your-api-url');
      data.value = response.data; // 将获取的数据赋值给 ref
    });

    return {
      data, // 返回这个响应式数据供模板或其他组合式函数使用
    };
  },
};

1. 在模板中解包响应式数据： 如果在模板中直接使用 data，Vue 会自动处理并显示其内部的原始值。但如果你需要在 setup 内部或者其他地方访问原始值，可以使用 .value：

console.log(data.value); // 访问数据的原始值

所以，并不是 Axios 请求返回的是代理对象，而是你在 Vue3 中正确地处理和使用了响应式数据。