Vue 3 中的代理对象不允许我访问数据

Question

我在 Vue 3 中有一个应用程序，我可以在其中调用代码的后端来获取数据。数据嵌套在 JSON 数组和对象中返回，然后我将数据分配给组件中的属性。我试图将 JSON 对象分配给父组件中的数据，然后将数据作为 prop 传递给我的子组件。然而，每次我这样做时，数据都会被分配为

Proxy(Object)

，这似乎使得访问子组件中的数据变得更加困难。

我的代码如下：

/* Parent Component */
<template>
  <div>
    <child-component :myData="rawData"></child-component>
  </div>
</template>
<script>
  import ChildComponent from '../components/ChildComponent.vue';
  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        rawData: {}
      }
    },
    methods: {
      getData() {
        fetch('/my-endpoint, { method: 'GET' })
          .then((response) => response.json())
          .then((data) => {
            this.rawData = data[0].data[0];
          })
      }
    }
  }
</script>

---

/* Child Component */
<script>
  export default {
    props: {
      myData: {
        type: Object
      }
    },
    data() {
      return {
        displayData: myData
      }
    }
  }
</script>

当我尝试

console.log()

保存我的

fetch

调用的任何数据（

rawData

、

myData

或

displayData

）时，我在控制台中看到

Proxy (Object)

，但无法访问任何数据对象中的数据。我在 Vue 开发工具插件中看到了数据，但我无法使用其中的任何数据。即使尝试做类似

console.log(displayData.id)

或

console.log(displayData.description)

之类的事情（我知道这些属性存在于这些对象中，以及我在 Vue 开发工具插件中看到的属性），我也只是在控制台中得到

undefined

。

我尝试过的事情：

父组件和子组件中的

• import { isProxy, toRaw } from 'vue';

  ，然后是

  if(isProxy(myData)) toRaw(myData);

  （与

  rawData

  和

  displayData

  相同）。这不起作用，对象仍然是代理。

父组件和子组件中的

• JSON.parse(JSON.stringify(myData));

  （与

  rawData

  和

  displayData

  相同）。这不起作用，对象仍然是代理。

• 出于无奈，将子组件中的 prop 声明更改为

  props: { myData: Object }

  甚至只是

  props: ['myData']

  。这不起作用，对象仍然是代理。

如何访问这些对象中的数据？我不希望它们成为代理对象，但如果我无法更改它们，那么如果它们需要保留为代理，我如何获取数据？

Answer 1

以下是一些需要修复的问题：

父组件：

• 处理异步调用时，建议使用

  v-if

  指令以避免错误和 UI 错误。
• 根据您的具体用例，在created()或mounted()生命周期挂钩中调用getData()方法。

子组件：

• 在 Vue 中使用 options API 时，请确保使用

  export default {}

  包裹组件。

• data()

  方法应该是一个返回对象的函数。它应该看起来像这样：

  data() { return {} }

  。
• 必要时使用关键字

  this

  来访问组件属性和方法。

这是更正后的代码。请注意，由于我没有您的端点，因此我使用 JokeAPI 作为示例：

/* Parent Component */
<template>
  <div v-if="rawData">
    <child-component :myData="rawData" />
  </div>
</template>
<script>
import ChildComponent from "../components/ChildComponent.vue";

export default {
  name: "ParentComponent",
  components: {
    ChildComponent,
  },
  data() {
    return {
      rawData: null,
    };
  },
  created() {
    // or mounted() - read docs to see the difference and choose accordingly
    this.getData();
  },
  methods: {
    getData() {
      // example with JokeAPI
      fetch("https://v2.jokeapi.dev/joke/Any", { method: "GET" })
        .then((response) => response.json())
        .then((data) => {
          this.rawData = data;
          // uncomment the next line according to your data
          // this.rawData = data[0].data[0];
        });
    },
  },
};
</script>

<template>
  <div>
    <pre>
      {{ displayData }}
    </pre>
  </div>
</template>

<script>
export default {
  props: {
    myData: {
      type: Object,
    },
  },
  data() {
    return { displayData: this.myData };
  },
};
</script>

这是供您测试和玩的codesandbox：codesandbox