Subscribe on changes!

Add reactiveWithRefs() without unwrapping Refs for reactive classes

avatar
Dec 7th 2020

What problem does this feature solve?

When we convert a object to reactive, every internal methods that use refs is broken. #2749 this is because reactive() give us direct access to Ref value without have to write .value, but internal functions are referencing to ref without unwrapping and when we call a function or getters it fails trying to access ref object.

The reactive function is ok, but classes could/should be reactive without lost functions and getters, I suggest to create a function reactiveWithRefs that does not unwrapping refs to avoid that problem, What do you think?

What does the proposed API look like?

const { reactive,  ref } = Vue;

class Foo {
  name = ref("Homer");

  greet() {
    console.log('Hello '   this.name.value);
  }
}
const homer = new Foo();

homer.greet(); // this print Hello Homer
reactive(homer).greet(); // this print Hello undefined

reactiveWithRefs(homer).greet(); // this should print Hello Homer 
reactiveWithRefs(homer).name.value // this should return "Homer"
avatar
Dec 7th 2020

That is like not using reactive at all and returning what is passed as an argument...

avatar
Dec 7th 2020

I think that using a closure, as suggested by Eduardo in #2749, is the most elegant solution.

Depending on your specific case, using shallowReactive instead of reactive can do the trick.