make toRef deeply reactive
What problem does this feature solve?
The goal would be to be able to extract a nested object from a reactive one and still hold the reactivity from the source object. This would allow great increase of code readability also being able to hold a local state reactive to any broader one.
What does the proposed API look like?
// Using composition API with no script setup
const myNestedObject = toRef(props.myProp, 'myNestedObject')
const myNestedProperty = computed(() => myNestedObject.value.property)
// ↑ this currently won't be reactive whenever the props.myProp will be changed
It will be reactive in this example
// Using composition API with no script setup
const myNestedObject = toRef(props.myProp, 'myNestedObject')
const myNestedProperty = computed(() => myNestedObject.value.property)
// ↑ this currently will reactive whenever the props.myProp will be changed
Example
Yeah, I'm not really seeing the big use case here. usually, data you get from a prop will already be reactive anyway, and in these cases, it already works, as demonstrated.
We would need more explicit examples of when/where users now might feel limited, and how a new functionality might improve the situation.
Actually I wanted to say that the myNestedObject
wasn't reactive, myNestedProperty
is indeed.
I was able to reproduce what happened on my App here
Basically when the ref's value in the parent component gets reassigned, it will be reactive in the child component if it's a computed
returning the actual value, but not if it's a toRef
.
Is this an expected behavior?
Actually I wanted to say that the
myNestedObject
wasn't reactive,myNestedProperty
is indeed. I was able to reproduce what happened on my App hereBasically when the ref's value in the parent component gets reassigned, it will be reactive in the child component if it's a
computed
returning the actual value, but not if it's atoRef
.Is this an expected behavior?
This is necessary for infos to point to the same object
Rather than that, just use a computed property, that's why we have them. Or use toRef on the prop, instead of a nested property: