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?

Answer 1

TLDR: The console still shows the expected values and you still interact with the variable the same as if it did not say Proxy.

---

A proxy is a powerful JavaScript ES6 feature which allows you to intercept any interaction with a target object and execute custom behavior. If you are familiar with event listeners, you can think of a proxy as a sort of event listener for object interaction.

The Vue 3 guide on reactivity explains proxies like this:

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

Proxies are stealthy "wrapper" objects which can intercept not just write events to a target (i.e. object mutations/changes) but even read events as well (i.e. merely reading a property value). This capability is how Vue 3 implements reactivity on reactive variables, by using proxies to track data changes and trigger updates. (In Vue 2 this was done with getters and setters.)

All proxies have the Proxy label in the console to make you aware that the logged object has a proxy intercepting it. You can then click in the console to expand the proxy to see what it's doing. The target object can be found in the proxy's [[Target]] property.

So what does this all change about the way you interact with reactive objects in Vue 3? Not much. You still interact with the target object the same way as if it had no proxy, there is no special syntax.

Answer 2

Check this out, in Vue3 there is a built in function toRaw you can use to deconsctruct the proxy. I just found this and it helped me access the functions in an object in my pinia store that was not working through the proxy it auto-wraps.

import { isProxy, toRaw } from 'vue';

const editor = toRaw(myStore.editor)

I learned this from here

Answer 3

You can destructure the proxy using the ES6 syntax below or using Vue's toRaw.

import { reactive, toRaw } from 'vue'
const state = reactive({msg:'hello world'});

console.log({...state});  
console.log(toRaw(state));