defineProps默认值是否可以这样规定

[bike2024]

官网上在js中规定默认值使用的是
const {a} = defineProps({
a:{
type:Number,
default:1 //这里
}})
但我是否可以在js中通过
const {a=1} = defineProps({a:Number})
来规定默认值呢

AI不推荐我这么做，理由是

1. 父组件传递undefined会导致子组件的默认值为undefined

• 但是根据我的测试并不会这样，即使父组件传递undefined，默认值依然是我设定的默认值

2. 多个子组件共享一个默认值，如果一个子组件修改了这个值，那其他子组件的默认值也会被修改。

• 但是根据我的测试，解构赋值默认值并不会导致多个子组件共享一个默认值，每个子组件都有自己的实例。如果你使用default来赋值，使用default:[ ]或default:{ }才会出现共享的情况（应该使用default:()=>[]和default:()=>({ })才是正确的做法），
• 还有一点，子组件修改props本身就是不被推荐的

所以AI说的每一点都被证实错误，我感觉在js中使用解构赋值默认值是完全可以的

---

On the official website, it is specified that in JavaScript, default values are set using:
const {a} = defineProps({
a:{
type:Number,
default:1 //here
}})
But can I set default values in JavaScript using:
const {a=1} = defineProps({a:Number})

AI does not recommend doing this, for the following reasons:

1. If the parent component passes undefined, it will cause the child component's default value to be undefined.

• However, based on my tests, this is not the case. Even if the parent component passes undefined, the default value remains as the one I set.

2. Multiple child components share a default value. If one child component modifies this value, the default values of the other child components will also be modified.

• However, based on my tests, using destructuring assignment for default values does not cause multiple child components to share a default value. Each child component has its own instance. If you use "default" to assign values, using default: [ ] or default: { } will cause sharing (the correct approach is to use default: () => [] and default: () => ({})).

• Additionally, modifying props in child components is not recommended.

So, every point made by AI has been proven wrong. I feel that using destructuring assignment for default values in JavaScript is completely feasible.

[jh-leong]

Yes, you can do this :)

Playground

<script setup lang="ts">
const { foo = { a: 1 }, bar = 1 } = defineProps<{
  foo: { a: number };
  bar: number;
}>();

// This compiles to:
const _ = {
  // ...
  props: {
    foo: { type: Object, required: true, default: () => ({ a: 1 }) },
    bar: { type: Number, required: true, default: 1 },
  },
  // ...
};
</script>

[Wei-Ba]

使用默认值为对象正确的方式是函数返回
这玩意不需要专门测试，官网和其他教程里面也写得有Docs: Props

defineProps({
  data: {
    type: Object,
    default: () => ({}) // () => { return {} }
  }
})

在以前的版本中，解构会失去响应式，现在没这问题了而已...
纠正一下之前的
现在当你使用解构赋值时会使用mergeDefaults与原本的props进行合并(如果赋值为对象则自动转换为函数返回)

const { data = {} } = defineProps({data: { type: Object }})
// ↓
/* sfc */{
  ...,
  props: mergeDefault(/* raw */ { data: { type: Object } }, { data: () => ({}) }),
  ...
}