代理在Vue 3的控制台中是什么意思? [英] What does Proxy mean in the console in Vue 3?

问题描述

我正在改组数组并在控制台中收到一条奇怪的消息.

I'm shuffling an array and getting a weird message in the console.

我的JSON文件如下:

My JSON file looks like this:

[
  {
    "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"
    }
  },
...

这是我的组件，可以使食物对象的排列变乱.

And this is my component that shuffles the array of food objects.

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 东西.

However, I'm getting this Proxy thing on console log after shuffling.

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

What could be the issue here? What is changing this to Proxy?

推荐答案

Vue 3中的反应性对象具有 Proxy 标签，因为Vue的反应性系统使用

Reactive objects in Vue 3 have the Proxy label because Vue's reactivity system uses proxies as the fundamental mechanism for reactivity.

摘录自关于反应性的Vue 3指南:

代理是一个包含另一个对象或功能并允许您对其进行拦截的对象.

a Proxy is an object that encases another object or function and allows you to intercept it.

代理指定一个:

1. 目标(原始对象)

1. Target (the original object)

处理程序(或陷阱)

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

The handler traps calls to the target object.

控制台会让您知道已记录的对象具有有效的代理.

The console is letting you know that the logged object has a proxy in effect.

这篇关于代理在Vue 3的控制台中是什么意思?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！