Vue Array 转换为 Proxy 对象

Question

我是 Vue 的新手。在制作这个组件时，我卡在这里了。

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

<script>
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();
  }
};
</script>

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

我在这里做错了什么？

Answer 1

数据中的项目（例如您的门票）被制作成可观察的对象。这是为了允许反应性（自动重新渲染 UI 和其他功能）。这是预期的，并且返回的对象的行为应该与数组一样。

查看反应性文档，因为您需要以特定模式与数组交互，否则它将不会在 ui 上更新： https: //v3.vuejs.org/guide/reactivity-fundamentals.html

如果您不想具有反应性 - 也许您从不更新客户端上的票证而只想显示它们 - 您可以在 response.data 上使用 Object.freeze() ；

Answer 2

如果您想要反应性信息，请使用 toRaw https://vuejs.org/api/reactivity-advanced.html#toraw

    const foo = {}
    const reactiveFoo = reactive(foo)
    
    console.log(toRaw(reactiveFoo) === foo) // true

或者如果您不希望 ref 包装器围绕您的信息，请使用 unref

https://vuejs.org/api/reactivity-utilities.html#unref

Answer 3

您可以从返回的代理中检索数组响应对象，方法是将其转换为 JSON 字符串，然后再转换回数组，如下所示：

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

Answer 4

import { isProxy, toRaw } from 'vue';

let rawData = someData;

if (isProxy(someData)){
    rawData = toRaw(someData)
}