Vue3中ref的Proxy无法访问：为何.data.value仍返回Proxy？

我尝试从API获取数据并在脚本中复用，用ref存储数据。通常通过myRef.value就能访问数据，但遇到特殊情况，很难访问Proxy内的数据。

组合式函数请求代码 #

export default function (url) {
  const data = ref([]);
  const count = ref(0);
  const page = ref(1);
  const isLoaded = ref(false);
  const getUrl = computed(() => {
    if (page.value > 1) {
      return `${url}?page=${page.value}`;
    } else return url;
  });

  watchEffect(async () => {
    axios({
      url: getUrl.value
    })
      .then((res) => {
        data.value = res.data.results;
        count.value = res.data.count;
        isLoaded.value = true;
      })
      .catch((err) => console.log(err));
  });

  const updatePage = (newPage) => {
    page.value = newPage;
  };

  return {
    data: data,
    count,
    page,
    updatePage
  };
}

日志输出情况 #

两段日志显示：

• 打印res.data.results时，直接展示了数组的具体内容
• 打印data.value时，显示的是Proxy(Array)，无法直接看到内部数据

明明已经把res.data.results赋值给data.value，但两者日志结果不一样。按道理访问ref的.value应该返回Proxy的实际内容，为什么这里还是显示Proxy？我已经找到临时解决办法，但想先搞懂问题根源。

问题根源 #

这是Vue 3响应式系统的特性导致的：

• 当给ref的.value赋值对象/数组时，Vue会自动将其转换成Proxy代理对象，以此实现响应式追踪。而res.data.results是API返回的原始普通数组，没有被代理，所以控制台直接展示内容。
• 控制台显示的Proxy(Array)是浏览器对Vue响应式代理的默认展示形式，并非数据无法访问——你依然可以通过data.value[0]、data.value.length等方式正常操作数据，只是默认没展开代理内部的真实值。
• 另外可能存在打印时机问题：如果在异步请求完成前就打印data.value，此时它还是初始的空代理数组，而res.data.results是请求完成后的真实数据，两者自然不同。

验证与处理方式 #

• 查看Proxy内部真实数据：可以在控制台执行JSON.parse(JSON.stringify(data.value))，或者直接点击控制台中Proxy对象的箭头，展开后查看[[Target]]字段，里面就是原始数组。
• 若想避免自动代理（会失去响应式）：可以用markRaw()包裹赋值内容，比如data.value = markRaw(res.data.results)，仅适合不需要响应式的场景。

内容的提问来源于stack exchange，提问作者haligh