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

问题描述

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

我的 JSON 文件如下所示:

<预><代码>[{id":1，名称":寿司"，图像":https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"，价格":7.99，餐厅":寿司花园"，城市":本拿比"，googleMap":https://www.google.com"，关键字":Lorem ipsum"，在线订单":{美食":https://www.google.com"，doorDash":https://www.daum.net"，skipTheDish":https://www.naver.com"}},{id":2，名称":面条"，图像":https://images.pexels.com/photos/1640777/pexels-photo-1640777.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"，价格":7.99，餐厅":餐厅名称"，城市":本拿比"，googleMap":https://www.google.com"，关键字":Lorem ipsum"，在线订单":{美食":https://www.google.com"}},...

这是我对食物对象数组进行洗牌的组件.

从/json/foods.json"导入食物；从lodash"导入_...创建:函数(){this.retrievedFoods = 食物；this.randomizeFoodsOrder();},数据() {返回 {检索到的食物:[]，};},方法: {randomizeFoodsOrder() {让温度 = 食物；控制台日志(温度)；//大批this.retrievedFoods = _.shuffle(temp);控制台日志(this.retrievedFoods)；//代理????},...

但是，我在改组后在控制台日志中得到了这个 Proxy 的东西.

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

解决方案

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

来自 Vue 3 反应性指南:

<块引用>

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

代理指定:

1. 目标(原始对象)

2. 处理程序(或陷阱)

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

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

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

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????
    },
...

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

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

解决方案

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

From the Vue 3 guide on reactivity:

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

A proxy specifies a:

1. Target (the original object)

2. Handler (or trap)

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屋！