Vue3中Proxy对象无法访问数据的技术求助

问题根源 #

Vue3通过Proxy实现响应式系统，组件中的响应式对象会被Proxy包裹，这是正常机制。你遇到的undefined并非Proxy本身导致，大概率是异步数据未加载完成就访问属性，或者子组件中prop的使用方式有误。

解决方案 #

1. 确保异步数据加载完成 #

父组件需要主动调用getData触发接口请求，比如在mounted钩子中执行，同时修正原代码中fetch的语法错误：

// 父组件修改后的script部分
export default {
  components: { ChildComponent },
  data() { return { rawData: {} } },
  methods: {
    getData() {
      fetch('/my-endpoint', { method: 'GET' })
        .then(res => res.json())
        .then(data => {
          this.rawData = data[0].data[0];
        })
    }
  },
  mounted() {
    this.getData(); // 初始化时调用接口加载数据
  }
}

2. 正确访问Proxy对象的属性 #

Proxy是原对象的代理，直接通过.访问属性完全有效，比如myData.id。之前返回undefined是因为数据还未加载完成，而非Proxy的问题。

如果需要在控制台查看真实数据，可以用：

console.log(JSON.parse(JSON.stringify(this.myData)));

3. 子组件中正确处理prop #

子组件的data函数在初始化时执行，此时异步prop可能还未传递，直接赋值会导致displayData为空。推荐两种处理方式：

方式一：使用计算属性同步prop

// 子组件script
export default {
  props: {
    myData: { type: Object }
  },
  computed: {
    displayData() {
      return this.myData; // 自动响应prop的变化
    }
  }
}

方式二：用watch监听prop变化

// 子组件script
export default {
  props: {
    myData: { type: Object }
  },
  data() {
    return { displayData: {} }
  },
  watch: {
    myData: {
      immediate: true, // 初始化时立即执行
      handler(newVal) {
        this.displayData = newVal;
      }
    }
  }
}

4. toRaw的正确用法 #

如果确实需要绕过响应式获取原始对象，需将toRaw的返回值赋值给变量：

import { toRaw } from 'vue';

// 在子组件中使用
const rawObj = toRaw(this.myData);
console.log(rawObj.id); // 访问原始对象的属性

总结 #

Proxy是Vue3响应式的正常机制，无需刻意避免。核心问题在于异步数据的加载时机和子组件对prop的响应式处理。确保数据加载完成后再访问属性，用计算属性或watch同步prop即可解决问题。

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