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)

}