feat(compiler-sfc): enable reactive props destructure by default by yyx990803 · Pull Request #7986 · vuejs/core (original) (raw)

Reactive props destructure was part of the Reactivity Transform proposal. The $ref part of Reactivity Transform has been dropped, but we are landing reactive props destructure as a stable feature and enabling it by default. withDefaults() is deprecated in favor of using the destructure default value syntax:

withDefaults() was marked as deprecated in this PR but the deprecation has been reverted in 4af5d1b.

{{ foo }} {{ bar }}

• One side benefit of this is that usage of props in the <script> block will be consistent with usage in <template>.
• Assignment to destructured prop bindings will be compile-time error, even if the declaration is using let.
• Calling watch() directly on a destructured prop is expected to be a common gotcha, so this is detected and will result a compile-time error that nudges the user to use a getter instead.

Caveat

You cannot enforce the type of the destructure default value in TypeScript, so technically this is possible:

The resulting type of foo will be number | 'hello', i.e. the user could widen the type of the prop by mistake. That said, in most cases, this should be caught by code that expects the original type of the prop.

To address this, we perform compile-time check to catch the most common cases of type mismatch (cf9ebaf). This check is limited to cases where both the default value type and the declared type can be safely inferred. It's not comprehensive, but should provide a good enough safeguard for the most common cases.