Subscribe on changes!

Destructuring props no longer works without experimental features

avatar
May 11th 2023

Vue version

3.3

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-hbtqav?file=src/App.vue

Steps to reproduce

Open the example in a new tab to see the console.log's.

You can see that the destructured variable in the Works component has been logged, but the one in the NotWorks component is undefined.

What is expected?

Both props are available. This worked below 3.3

What is actually happening?

Looking at https://github.com/nuxt/nuxt/issues/20789 and https://github.com/nuxt/nuxt/pull/20795 it seems like when we do not enable reactivity transform or the new props destructuring feature, then the destructured props are just lost after compilation.

Probably related to this code path: https://github.com/vuejs/core/blob/main/packages/compiler-sfc/src/script/definePropsDestructure.ts#L31

System Info

No response

Any additional comments?

No response

avatar
May 12th 2023

If this feature graduates from experimental to stable, snippets like Nuxt's would break, anyway, because error prop would suddenly become reactive, right? So, while destructuring props might be a valid pattern that should be considered by the compiler, just regressing to previous behavior may not be future-proof.

avatar
May 12th 2023

Yeah, but it would be better to keep the previous behaviour and introduce a deprecation warning after the new destructuring feature becomes stable and only then change the default compiler output. People would have a chance to react to this breaking change by doing it this way.