A little confused about the usage of withDefaults

[RexSkz]

The withDefaults functions should be used like this according to the doc (link):

const props = withDefaults(defineProps<Props>(), {
  msg: 'hello',                // primitives can be directly returned
  labels: () => ['one', 'two'] // reference value should be wrapped in a function
})

We must identify which prop is a primitive and which is a reference. Although we have typings for help, it's still a burden for a newcomer.

I think the "function" may be to prevent multiple components have the same referenced value (labels in the example), but why don't we write down the whole 2nd parameter as a function, just like the data in Vue 2:

// !!! this is not the right usage of `withDefaults`,
// !!! just to show my thought
const props = withDefaults(defineProps<Props>(), () => ({ // it's a function
  msg: 'hello',                                           // directly returned
  labels: ['one', 'two']                                  // directly returned as well
}))

Does anyone know why withDefaults is not designed like this? Are there any considerations (maybe for compiler optimisation or some special cases)?

[ZenMoon]

good question

[liulinboyi]

The use in Vue3 is from Vue2, Each prop handles its own defaults.
https://v2.vuejs.org/v2/guide/components-props.html

[RexSkz]

This solves my question. Thank you!

// I thought the withDefaults is like data, but I didn't expect this to be like props...