Vue 3中控制台中的Proxy是什么意思？

Question

我正在洗牌数组并在控制台中收到一条奇怪的消息。

我的 JSON 文件如下所示：

 [
  {
    "id": 1,
    "name": "Sushi",
    "image": "https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "price": 7.99,
    "restaurant": "Sushi Garden",
    "city": "Burnaby",
    "googleMap": "https://www.google.com",
    "keywords": "Lorem ipsum",
    "onlineOrders": {
      "foodly": "https://www.google.com",
      "doorDash": "https://www.daum.net",
      "skipTheDish": "https://www.naver.com"
    }
  },
  {
    "id": 2,
    "name": "Noodle",
    "image": "https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    "price": 7.99,
    "restaurant": "Restaurant Name",
    "city": "Burnaby",
    "googleMap": "https://www.google.com",
    "keywords": "Lorem ipsum",
    "onlineOrders": {
      "foodly": "https://www.google.com"
    }
  },
...

这是我的组件，用于打乱食物对象的数组。

 import foods from "/json/foods.json";
import _ from "lodash";

...

 created: function () {
    this.retrievedFoods = foods;
    this.randomizeFoodsOrder();
  },
  data() {
    return {
      retrievedFoods: [],
    };
  },
  methods: {
    randomizeFoodsOrder() {
      let temp = foods;
      console.log(temp); // Array
      this.retrievedFoods = _.shuffle(temp);
      console.log(this.retrievedFoods); // Proxy????
    },
...

但是，我在洗牌后在控制台日志上得到这个 Proxy 东西。

这里可能是什么问题？什么将此更改为代理？

原文由 Raccoon 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

TLDR：控制台仍然显示预期值，您仍然与变量交互，就好像它没有说 Proxy 一样。

---

代理 是一项强大的 JavaScript ES6 功能，它允许您拦截与目标对象的任何交互并执行自定义行为。如果您熟悉事件侦听器，则可以将代理视为一种用于对象交互的事件侦听器。

关于反应性的 Vue 3 指南 解释了这样的代理：

代理是一个包含另一个对象或函数并允许您拦截它的对象。

代理是隐蔽的“包装器”对象，它不仅可以拦截将事件 写入 目标（即对象突变/更改），甚至还可以拦截 读取 事件（即仅读取属性值）。此功能是 Vue 3 通过使用代理跟踪数据更改和触发更新来实现对 reactive 变量的反应性。 （在 Vue 2 中，这是通过 getters 和 setters 完成的。）

所有代理在控制台中都有 Proxy 标签，让您知道记录的对象有代理拦截它。然后您可以在控制台中单击以展开代理以查看它在做什么。目标对象可以在代理的 [[Target]] 属性中找到。

那么这一切对您在 Vue 3 中与反应式对象交互的方式有何改变？不多。您仍然可以像没有代理一样与目标对象进行交互，没有特殊的语法。

原文由 Dan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

检查一下，在 Vue3 中有一个内置函数 toRaw 可以用来解构代理。我刚找到这个，它帮助我访问了我的 pinia 商店中一个对象中的函数，该对象无法通过它自动包装的代理工作。

 import { isProxy, toRaw } from 'vue';

const editor = toRaw(myStore.editor)

我从 这里 学到的

原文由 Jesse Adamson 发布，翻译遵循 CC BY-SA 4.0 许可协议