Vue Array 转换为 Proxy 对象答案

【问题标题】：Vue Array converted to Proxy objectVue Array 转换为 Proxy 对象
【发布时间】：2021-03-03 04:10:06
【问题描述】：

我是 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 对象，而不是我从 API 获得的 Array。

我在这里做错了什么？

【问题讨论】：

标签： javascript vue.js axios vuejs3

【解决方案1】：

数据中的项目（如门票）被制成可观察对象。这是为了允许反应性（自动重新渲染 UI 和其他功能）。这是意料之中的，返回的对象应该像数组一样表现。

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

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

【讨论】：

我刚刚意识到我可以像使用数组一样使用它。使用console.logs 进行调试有点困难，无论如何这对我来说都是如此。感谢您的回复！
很高兴能提供帮助，我有时会使用 console.log(JSON.parse(JSON.stringify(observableObject))) 使其更易于阅读。如果您将其放入您的模板中，它将干净地呈现输出：
```
{{tickets}}
```
这是 100% 正确的吗？我正在尝试检查数组 .includes() 是否是一个值，并且它会不断与索引而不是实际值进行比较。我必须对照 Object.values(array) 检查它。
OP 询问了新的 Vue 3，文档适用于旧的 2.x 版本。如果我没记错的话，新版本中的反应性发生了很大变化，而旧文档不再正确

【解决方案2】：

你没有做错任何事。您只是发现了使用 vue 3 的一些复杂之处。

大多数情况下，您可以像使用原始数组对象一样使用代理数组对象。但是the docs 声明：

使用 Proxy 确实引入了一个需要注意的新警告：代理对象在身份比较方面不等于原始对象 (===)。

其他依赖严格相等比较的操作也会受到影响，例如 .includes() 或 .indexOf()。

文档中的建议尚未完全涵盖这些情况。我发现在检查 Object.values(array) 时可以让 .includes() 工作。（感谢 cmets 中的@adamStarrh）。

【讨论】：

【解决方案3】：

您可以从返回的 Proxy 中检索 Array 响应对象，方法是将其转换为 JSON 字符串并返回为 Array，如下所示：

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

【讨论】：