core destructing directly props diffs from destructing props indirectly

trafficstars

Vue version

3.4.21

Link to minimal reproduction

https://play.vuejs.org/#eNq1VN9PwjAQ/leavjgSMxLEFxwkanjQRCXiYxOD24HDrW3aDkeW/u9eyxg/4ggvvN3u++763fVbK3ovZbgqgA5opGOVSkM0mEKOGE9zKZQhFVEwJ5bMlcjJFVKvGmhafNXpsIux63MA9vbRXg3HgmtDyrIkQ1Kt1+sBtg8q27GMR92NBDwcPwzkMpsZwC9CoiRd+QBDd+wAK4eMYpsQI0ZJdw/ttcFRd9vGHbZ3AL2mRqOyeboIl1pwXEflaTQWuUwzUG/SpKic0QHxiMNmWSZ+n33OqAKut/n4G+Kff/JLXbocoxMFGtQKGG0wM1MLMBt4PH2FEuMGzEVSZMg+Ab6DFlnhNG5oDwVPUPYez6t98peT8sWHHpcGuN4O5YQ6pvV8RvGyHk+MvpN7E/Z9HeMWt1jbAPeHG24xlOAvouAGkjZTHflqZ62Nd5xrLLongXnKYaKE1IF3UmVth/GmfRB0hiOv2NWJDMJMLALmNOJasADJruCU7Wo1tZ+8l0ZRLQoZxyba+vyi80s3cfv8h0vyZDfYOWvpXXAvO2e0PjSNxIPn5u7Mez9vxLMv/3iEzxUo97fgADfhbdin9g9aLM7Z

Steps to reproduce

https://play.vuejs.org/#eNq1VN9PwjAQ/leavjgSMxLEFxwkanjQRCXiYxOD24HDrW3aDkeW/u9eyxg/4ggvvN3u++763fVbK3ovZbgqgA5opGOVSkM0mEKOGE9zKZQhFVEwJ5bMlcjJFVKvGmhafNXpsIux63MA9vbRXg3HgmtDyrIkQ1Kt1+sBtg8q27GMR92NBDwcPwzkMpsZwC9CoiRd+QBDd+wAK4eMYpsQI0ZJdw/ttcFRd9vGHbZ3AL2mRqOyeboIl1pwXEflaTQWuUwzUG/SpKic0QHxiMNmWSZ+n33OqAKut/n4G+Kff/JLXbocoxMFGtQKGG0wM1MLMBt4PH2FEuMGzEVSZMg+Ab6DFlnhNG5oDwVPUPYez6t98peT8sWHHpcGuN4O5YQ6pvV8RvGyHk+MvpN7E/Z9HeMWt1jbAPeHG24xlOAvouAGkjZTHflqZ62Nd5xrLLongXnKYaKE1IF3UmVth/GmfRB0hiOv2NWJDMJMLALmNOJasADJruCU7Wo1tZ+8l0ZRLQoZxyba+vyi80s3cfv8h0vyZDfYOWvpXXAvO2e0PjSNxIPn5u7Mez9vxLMv/3iEzxUo97fgADfhbdin9g9aLM7Z in above example. The component Sub and Sub2 both bind xxx.yyy.Destruct yyy directly in Sub component,however do it indirectly in Sub2. Both two have the same child component SubSub,but console.log outputs different result yyy in two SubSub,one is RefImpl,other is Proxy. Look at the screenshot below.

What is expected?

two SubSub console.log output the same result.

What is actually happening?

Be different

System Info

System:
    OS: Windows 11 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 1.27 GB / 7.91 GB
  Binaries:
    Node: 18.20.3 - D:\devtools\nodejs\node.EXE
    npm: 8.19.2 - D:\devtools\nodejs\npm.CMD

Any additional comments?

No response

Sep 12 '24 16:09 pei-han

I looked into it, but I don't know if the subsub component should get the ref or reactive. Do you think? @edison1105

Sep 14 '24 02:09 coderwei99

Although const {yyy} = defineProps({yyy:{}}) and const props = defineProps({yyy:{}});const {yyy} = props appear to be the same, they are actually compiled into completely different code

https://github.com/vuejs/rfcs/discussions/502#discussioncomment-6544718

Sep 14 '24 02:09 linzhe141

First of all,thanks for you all. Although there was the same outputs like my playground example in latest version yet,but thank a lot for @linzhe141 . Then i have found the reason to appear this phenomenon,and the official website doc of vue also metion the corresponding knowledge. Screenshot below from vue officail doc.

Sep 14 '24 06:09 pei-han

Through the example above,i guess the returned object of defineProps function should be a special shallowReactive one. Please confirm my thought, i would appreciate that. I have authored a vue playground example,below.

https://play.vuejs.org/#eNq1VE1v2zAM/SuCLnUAw8HS7uI5Abahhw3YVrQ7Chgym0nd2ZIgyZ4DQ/99lPwRx2uCXHoKpUdSfM+PaelHKaO6AhrTRKcql4ZoMJXcMJ6XUihDWqJgR0L9vC0K8fcRtqnJa7Bkp0RJbrD0Zkx9qn7319ESY9f3BFxN0VUPp4JrQ5qmIWvSHg6HGJ8LWruwA6QRmL0etIwTMkkO3Rl7xL5Da7HYLroGooCoEPuAOapEMxpqRJJlxxZ54sFAKYutATwRkmR57QMMHaMYW64Zxe4RRoyS5QRd/Q/HGOJF28Tv7JidLIeu7u3JezSkRuOcu3wfvWjB8UN4coymopR5AeqHNDnyYDQmHnGYV+OrvzOqAk/f1zxD+ueV+xfduDtGHxRoUDWgDANmtmoPpoPvn75Dg/EIliKrCsy+AD4Caly5Gbu0TxXPcOxJnp/2i7dBzvc/9X1jgOuBlBvUZVqfzyja4vMF6sdxb6M7X4ffGlXsDYf6ocJnrCz4N1FxA9k5+84cfDRxZ0XnLot2zGCXc3hQQupgcByaamwfBIv1xk986kDsh7JgASa7gksu7Kfp7eWttUn6oTBjbqJho96Uv3SMX+cf+u3zMpxq5Wvmq+g3p0No6H+vlG/1hvodHXT2r3AckUwV/HClP66jeLVJ5hR+1aDcViGB2+h9dEftP8gHCU0=

There is a shallowReactive object named s in App component,and logout this object displayed in screenshot below.

I also logout the props of Sub2 component in which there are two properites xxx and yyy. You can see the props object is a special nested proxy.

Nov 10 '24 16:11 pei-han

Through the example above,i guess the returned object of defineProps function should be a special shallowReactive one. Please confirm my thought, i would appreciate that. I have authored a vue playground example,below.

https://play.vuejs.org/#eNq1VE1v2zAM/SuCLnUAw8HS7uI5Abahhw3YVrQ7Chgym0nd2ZIgyZ4DQ/99lPwRx2uCXHoKpUdSfM+PaelHKaO6AhrTRKcql4ZoMJXcMJ6XUihDWqJgR0L9vC0K8fcRtqnJa7Bkp0RJbrD0Zkx9qn7319ESY9f3BFxN0VUPp4JrQ5qmIWvSHg6HGJ8LWruwA6QRmL0etIwTMkkO3Rl7xL5Da7HYLroGooCoEPuAOapEMxpqRJJlxxZ54sFAKYutATwRkmR57QMMHaMYW64Zxe4RRoyS5QRd/Q/HGOJF28Tv7JidLIeu7u3JezSkRuOcu3wfvWjB8UN4coymopR5AeqHNDnyYDQmHnGYV+OrvzOqAk/f1zxD+ueV+xfduDtGHxRoUDWgDANmtmoPpoPvn75Dg/EIliKrCsy+AD4Caly5Gbu0TxXPcOxJnp/2i7dBzvc/9X1jgOuBlBvUZVqfzyja4vMF6sdxb6M7X4ffGlXsDYf6ocJnrCz4N1FxA9k5+84cfDRxZ0XnLot2zGCXc3hQQupgcByaamwfBIv1xk986kDsh7JgASa7gksu7Kfp7eWttUn6oTBjbqJho96Uv3SMX+cf+u3zMpxq5Wvmq+g3p0No6H+vlG/1hvodHXT2r3AckUwV/HClP66jeLVJ5hR+1aDcViGB2+h9dEftP8gHCU0=

There is a shallowReactive object named s in App component,and logout this object displayed in screenshot below.

I also logout the props of Sub2 component in which there are two properites xxx and yyy. You can see the props object is a special nested proxy.

In fact, defineProps is just a compilation tool, and props is indeed a shallowReactive https://github.com/vuejs/core/blob/main/packages/runtime-core/src/componentProps.ts#L216~L218

In Sub.vue, it is compiled into { yyy: $props.yyy }, but vue will only perform possible ref unwrap processing on setupState (instance.setupState = proxyRefs(setupResult)), even though $props.yyy is a ref, it will not be unwrapped