destructing directly props diffs from destructing props indirectly

pei-han commented 1 week ago

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 Sub. 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

coderwei99 commented 5 days ago

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

linzhe141 commented 5 days ago

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

pei-han commented 5 days ago

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.

vuejs / core