Search code examples
vuejs3es6-proxy

Extend JavaScript (Vuejs3) proxies with another method


Vue3 uses proxies to wrap object data properties.

I have several of these objects where I'd like to add additional functionality to the proxy itself, namely watch get for certain scenarios. Is there a way to extend the proxy object created by Vue, or is it too late because all of that functionality has to be passed in the callback when the proxy object is created?

I'd like to avoid wrapping a proxy in another proxy, if that's even a possibility.


Update

I did try wrapping my object in a Proxy. This caused very bad things to happen when Vue added its Proxy, including something I'm still not sure should be possible - stepping through each line in debugger, as soon as a line tried to access the data property the currently running function would simply not be running any longer. No errors, doesn't freeze the application, not even a warning level message. The application simply doesn't make it past that line in the current function.


Solution

  • I had similar needs. I had my own proxies but the issue was that they were not reactive and any changes to the underlying target won't be watched. I managed to make my proxy reactive the following way:

    const target = {}
    
    const reactiveProxy = reactive( new Proxy( reactive(target), { /*...*/ }) )
    

    Hope this works for your use case too.