Add reactiveWithRefs() without unwrapping Refs for reactive classes
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"
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.