Vue 数组转换为 Proxy 对象

Question

我是 Vue 新手。在制作这个组件时我被困在这里。

我正在使用以下代码向返回数组的 API 发出 AJAX 请求：

import axios from 'axios';

export default {

  data() {

    return {

      tickets: [],

    };

  },

  methods: {

    getTickets() {

      axios.get(url)

        .then((response) => {

            console.log(response.data) //[{}, {}, {}]

            this.tickets = [...response.data]

            console.log(this.tickets) //proxy object

          })

    },

  },

  created() {

    this.getTickets();

  }

};

问题是，this.tickets被设置为一个Proxy对象，而不是Array我从 API 获取的对象。

我在这里做错了什么？

Answer 1

数据中的项目（例如您的门票）被制作成可观察的对象。这是为了允许反应性（自动重新渲染 UI 和其他功能）。这是预期的，并且返回的对象的行为应该与数组一样。如果您不想具有反应性 - 也许您从不更新客户端上的票证而只想显示它们 - 您可以在 response.data 上使用 Object.freeze() ；

Answer 2

如果您想要反应性信息，请使用 toRaw    const foo = {}     const reactiveFoo = reactive(foo)         console.log(toRaw(reactiveFoo) === foo) // true或者如果您不希望 ref 包装器围绕您的信息，请使用 unref

Answer 3

您可以从返回的代理中检索数组响应对象，方法是将其转换为 JSON 字符串，然后再转换回数组，如下所示：console.log(JSON.parse(JSON.stringify(this.tickets)));

Answer 4

你没有做错任何事。您刚刚发现了使用 vue 3 的一些复杂之处。大多数情况下，您可以像使用原始数组对象一样使用代理数组对象。然而，文档确实指出：使用代理确实引入了一个需要注意的新警告：代理对象在身份比较方面不等于原始对象（===）。其他依赖于严格相等比较的操作也可能受到影响，例如 .includes() 或 .indexOf()。文档中的建议尚未完全涵盖这些情况。我发现在检查 Object.values(array) 时我可以让 .includes() 工作。

Answer 5

import { isProxy, toRaw } from 'vue';let rawData = someData;if (isProxy(someData)){    rawData = toRaw(someData)}