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)
}

4 thoughts on “How to get the data of a Proxy Object in Vue.js 3

  1. Timmy Taabermann

    Yes there is trouble 🙂 if I do this in my edit Dialog open(),
    this.form = toRaw(this.$props.product);
    the property in template is shown ok {{ product.name }}
    but if I use it through the this.form.name, it only updates on every other time I open my dialog. It’s like the values propagate too slowly to render to template.
    How can force immediate copy from $props.product to this.form, so that this.form properties become visible in {{ this.form.name }}
    i tried form: {} and form: ref({}) but no difference.

    Reply
  2. Sean

    Great blog.
    It didn’t work for me when trying to add it as a payload to an API request.

    Instead, I created a method the reproduced the proxy to a real array by looping through the keys and vals and adding them to the new array.

    Reply

Leave a Reply to Timmy Taabermann Cancel reply

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