Subscribe on changes!

Proxy unwrapping

avatar
Mar 17th 2021

What problem does this feature solve?

Data persisting in IndexedDB or other storages is very common nowadays, however trying to store JS Proxy in them throw errors.

It needs to be serialized through an old and ugly JSON.parse(JSON.stringify()) while normal objects don't. This creates huge performance issues on large scale applications.

Also, trying to avoid storing Proxy in Vuex to avoid its persistence is impossible due to the very undetectable nature of Proxy

We should be able to unwrap proxy to get plain old object or at least being able to distinguish them from plain objects

What does the proposed API look like?

import { unwrapProxy, reactive } from 'vue'

// Normal situation
const proxied = reactive({ key: 'value'  })
const object = unwrapProxy(proxied)


// Should be recursive
const nested = { proxied }
const nestedObject = unwrapProxy(nested). // nestedObject.proxied should be unwrapped
avatar
Mar 17th 2021

That's already supported:

import { toRaw } from 'vue'

https://v3.vuejs.org/api/basic-reactivity.html#toraw