A new toRefs, which supports converting ref.value of object type to ref.

[hcg1023]

What problem does this feature solve?

In Vue3, because the object generated by reactive can not be reassigned, we generally use the method of const objRef = ref(object) to define an object that needs to be assigned repeatedly. However, such a definition will make it cumbersome to read the attributes of the object, for example:

interface ObjType {
  name: string
  age: number
  sex?: string
}
const objRef = ref<ObjType>({ name: 'H', age: 1 })
objRef.value.name // 'H'
objRef.value.age // 1

I hope to provide a quick reading method through toRefs, for example:

const { name, age } = toRefs(objRef)
const sex = toRef(objRef, 'sex', 'boy')

What does the proposed API look like?

I have realized this function, but I have added a new api, which does not replace the original toRefs, so I hope to discuss with you whether it exists and if so, what does it look like? If appropriate, I will mention a PR. I put the corresponding code in my repository.

https://github.com/hcg1023/vue3-dnd/blob/main/lib/internals/toReactive.ts

[posva]

This looks more like a vueuse function than a core utility

[hcg1023]

Why do you think so? toRef and toRefs are internal

[lidlanca]

const { name, age } = toRefs(objRef.value)

[hcg1023]

That's not going to work, you're going to lose your original reactive

const { name, age } = toRefs(objRef.value)
name.value = '1'
// now
name.value !== objRef.value.name

I want

name.value === objRef.value.name

[lidlanca]

can you show how it is not working here

https://sfc.vuejs.org/

[hcg1023]

can you show how it is not working here

https://sfc.vuejs.org/

https://sfc.vuejs.org/
I want to reassign objRef and make sure name and value point to my latest objectRef, which I think is the desired effect

[lidlanca]

I see, reactivity of the extracted refs can be preserved, by mutating the ref.value instead of replacing it.

sfc

[hcg1023]

I understand it can be done, but from a usage point of view, objRef.value = { name: 'new' } is more convenient

[hcg1023]

https://github.com/hcg1023/vue-ref2reactive
This is my implementation, I hope you give a proper name, if it can be built into Vue, I can also mention a PR

[hcg1023]

Can we add a new overload to toRef and toRefs to support multi-level progression of objects
e.g.

function toRef<T extends object, K extends keyof T, K2 extends keyof T[K]>(obj: T, keys: [K, K2?]): K2 extends keyof T[K] ? T[K][K2] : T[K] {
}
const nameRef = toRef({ value: { name: 'new' } }, ['value', 'name'])
nameRef.value // 'new'

const objRef = ref({ name: 'ref', age: 16 })
const { name, age } = toRefs(objRef, ['value'])
name.value // 'ref'
age.value // 16