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

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在改组后在控制台日志中得到了这个东西。

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

Answer 1

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

import { isProxy, toRaw } from 'vue';

const editor = toRaw(myStore.editor)

我从这里学到了这个

Answer 2

Vue 3 中的反应性对象具有Proxy标签，因为 Vue 的反应性系统使用代理作为反应性的基本机制。

来自Vue 3 反应性指南：

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

代理指定：

1. 目标（原始对象）

2. 处理程序（或陷阱）

处理程序捕获对目标对象的调用。

控制台让您知道记录的对象有一个有效的代理。