Subscribe on changes!

make toRef deeply reactive

avatar
Apr 27th 2022

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
avatar
Apr 27th 2022

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

avatar
Apr 27th 2022

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.

avatar
Apr 28th 2022

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?

avatar
Apr 28th 2022

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?

image

This is necessary for infos to point to the same object

avatar
Apr 29th 2022

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:

Playground