How to get the data of a Proxy Object in Vue.js 3

Vue.js 3 uses Proxies, a powerful metaprogramming feature. By using Proxies Vue.js 3 managed to resolve the reactivity-related issues in Vue.js 2.

Since Proxies are a relatively new thing, lots of developers are having trouble understanding how Proxies work.

One very frequent question is how to access the underlying value of a Proxy in Vue.js 3.

Many people are suggesting the use of JSON.parse and JSON.stringify to achieve this, the use of which can become a headache for large datasets or repeated operations.

Thankfully, Vue already ships with helper functions to achieve just that in a safer way.

import { isProxy, toRaw } from 'vue';

let rawData = someData;

if (isProxy(someData)){
    rawData = toRaw(someData)
}

Leave a Reply

Your email address will not be published. Required fields are marked *