Skip to content

Commit 6da06fb

Browse files
TopographLuca
and
Luca
authored
Add info for wrapping refrence types in functions for withDefaults (#2909)
Add info for wrapping refrence types in functions for withDefaults default values Co-authored-by: Luca <luca@kubikfoto.de>
1 parent 2228194 commit 6da06fb

File tree

2 files changed

+8
-0
lines changed

2 files changed

+8
-0
lines changed

src/api/sfc-script-setup.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -227,6 +227,10 @@ const props = withDefaults(defineProps<Props>(), {
227227

228228
This will be compiled to equivalent runtime props `default` options. In addition, the `withDefaults` helper provides type checks for the default values, and ensures the returned `props` type has the optional flags removed for properties that do have default values declared.
229229

230+
:::info
231+
Note that default values for mutable reference types (like arrays or objects) should be wrapped in functions to avoid accidental modification and external side effects. This ensures each component instance gets its own copy of the default value.
232+
:::
233+
230234
## defineModel() <sup class="vt-badge" data-text="3.4+" /> {#definemodel}
231235

232236
This macro can be used to declare a two-way binding prop that can be consumed via `v-model` from the parent component. Example usage is also discussed in the [Component `v-model`](/guide/components/v-model) guide.

src/guide/typescript/composition-api.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@ const props = withDefaults(defineProps<Props>(), {
8484

8585
This will be compiled to equivalent runtime props `default` options. In addition, the `withDefaults` helper provides type checks for the default values, and ensures the returned `props` type has the optional flags removed for properties that do have default values declared.
8686

87+
:::info
88+
Note that default values for mutable reference types (like arrays or objects) should be wrapped in functions to avoid accidental modification and external side effects. This ensures each component instance gets its own copy of the default value.
89+
:::
90+
8791
### Without `<script setup>` {#without-script-setup}
8892

8993
If not using `<script setup>`, it is necessary to use `defineComponent()` to enable props type inference. The type of the props object passed to `setup()` is inferred from the `props` option.

0 commit comments

Comments
 (0)