What does Proxy mean in the console in Vue 3?

Question

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?

Solution

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.

Comments

[Raccoon]

oh wow... that's why... my vue2 exprience was making me blind... How can I copy an array of objects to a variable specified in data then? Thanks!

[Dan]

The underlying proxies won't change the way you code anything, so still the same way you would have before. Using _.cloneDeep would be a good choice since you're already using lodash

[songololo]

I find when storing an object in a pinia store (which converts said object to a proxy) it no longer seems possible to use an object's ordinary methods. Any tricks?

[Dan]

@songololo I would suggest to post a question specifically about Pinia. I haven't used it so I can't comment on that

[songololo]

@Dan thank you, did ask on GitHub and the answer was to wrap the object via markRaw