Why destructure a reactive obj also causing shallow reactive property unwraping

[FoundTheWOUT]

Vue version

latest

Link to minimal reproduction

https://play.vuejs.org/#eNp9UcFOwzAM/RUrl25S1UnAqRpIgHaAAyDgmEto3dLRJlHijkpV/x0n1bod0G6233vOe/Eo7q3NDj2KXGx94RpL4JF6eyd101njCEZwWKVQmM72hGXKrSqoOSBMUDnTQcLyRGqpC6M9QalIwe3CWo1SA3S+zsOeVcLVkKzTMFQ5JCqJZWVMDpEJ8KXczJWCSynWYTxJPXFxeuKK34iCLMtCz/gMmxaz1tSrSGLJdjPn4kTcEHa2VYTcbTdnjUgFeZZXTZ3tvdH8H3G7FCF406J7tdTweikWo1KotjW/z3FGrscYJWq+sfj5Z773Q5hJ8ebQozugFAtGytVIM7z7eMGB6wXsTNm3zL4AviNH74PHmfbQ65Jtn/Gi26d41UbXn343EGp/DBWMxp+OfCn4qo8Xop/sXmc3xwuJ6Q+3XMPc

Steps to reproduce

👆

What is expected?

reactive property not unwraping

What is actually happening?

https://vuejs.org/guide/essentials/reactivity-fundamentals.html#limitations-of-reactive
saying

when we destructure a reactive object's primitive type property into local variables, or when we pass that property into a function, we will lose the reactivity connection

but not mention how destructure effect reactive property. IMO，primitive type property lose reactive could make sense, but reactive property being unwrap didn't, isn't it.

System Info

No response

Any additional comments?

No response

[edison1105]

This is JavaScript's behavior and vue can't change it

[FoundTheWOUT]

em, i don't think that is same to my example. In your case, bar is not converting into a plain obj, and it really should not. Or, if i misunderstand someting?

[LinusBorg]

This is called ref unwrapping an explained in the docs

https://vuejs.org/api/reactivity-core.html#reactive

Ref unwrapping:

const count = ref(1)
const obj = reactive({ count })

// ref will be unwrapped
console.log(obj.count === count.value) // true

// it will update `obj.count`
count.value++
console.log(count.value) // 2
console.log(obj.count) // 2

// it will also update `count` ref
obj.count++
console.log(obj.count) // 3
console.log(count.value) // 3

[FoundTheWOUT]

Thank your reply.
I known this unwrapping feature. Just didn't realize that object deconstruct's property accessing phase is equivelent to get a property which invoke Getter.
Further, the api toRefs could solve this situation, but i found some weird case too.

const msg2 = computed(() => msg.value + '1')
const data = reactive({
  msg: msg2
})
const { msg: _m } = toRefs(data)
// _m: we got a ObjectRefImpl, it should be a computed
_m.value = '1' // we should warning, but error here

should vue retain the original reactivity's type?
seem my question is same to #5159