Vue Array 转换为 Proxy 对象

Posted 2023-02-22

【中文标题】Vue Array 转换为 Proxy 对象

【英文标题】：Vue Array converted to Proxy object

【发布时间】：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。

我在这里做错了什么？

【参考方案1】：

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

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

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

【讨论】：

我刚刚意识到我可以像使用数组一样使用它。使用console.logs 进行调试有点困难，无论如何这对我来说都是如此。感谢您的回复！

很高兴能提供帮助，我有时会使用 console.log(JSON.parse(JSON.stringify(observableObject))) 使其更易于阅读。如果您将其放入您的模板中，它将干净地呈现输出：

这是 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)));