Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

What does Proxy mean in the console in Vue 3?

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.

enter image description here

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

like image 897
Raccoon Avatar asked Nov 22 '20 23:11

Raccoon


People also ask

What is Proxy in Vue?

The most noteworthy among them is Proxy, which allows the framework to intercept operations on objects. A core feature of Vue is the ability to listen to changes made to the user-defined state and reactively update the DOM.

What does Proxy mean in console?

The Proxy object allows you to create an object that can be used in place of the original object, but which may redefine fundamental Object operations like getting, setting, and defining properties. Proxy objects are commonly used to log property accesses, validate, format, or sanitize inputs, and so on.

Can you use console log in Vue?

Console log can be used in Vue js application, however, it is disabled. The reason for this is that it is not a good practice to use methods on the console. But, if you want to test something, for example, if a method gets the data, by default, you can't use a console log to check this.


Video Answer


3 Answers

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.

like image 196
Dan Avatar answered Oct 23 '22 18:10

Dan


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

like image 5
Jesse Adamson Avatar answered Oct 23 '22 18:10

Jesse Adamson


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));    
like image 3
mbokil Avatar answered Oct 23 '22 16:10

mbokil