Vue中Object类型Prop默认值：返回undefined的写法是否合规？

首先明确：这种写法是符合Vue规范的，以下是具体分析：

Vue官方对对象/数组Prop默认值的核心要求 #

Vue官方规定，对象或数组类型的Prop的默认值必须通过工厂函数返回，核心目的是避免多个组件实例共享同一个引用类型的默认值（比如所有实例共用同一个空对象，导致修改时互相影响）。但规范并没有强制要求工厂函数必须返回一个同类型的实例。

两种写法的差异与适用场景 #

1. 返回空对象的标准写法 #

这是最常见的合规写法，默认值为一个新的空对象：

foobar: {
  type: Object,
  default() {
    return {}
  }
}

// 或箭头函数写法
foobar: {
  type: Object,
  default: () => ({})
}

但问题在于，空对象属于真值，无法区分“用户主动传入了空对象”和“组件使用了默认空对象”这两种场景。

2. 返回undefined的写法 #

你提到的这种写法，工厂函数没有明确返回值（默认返回undefined），此时Prop的默认值就是undefined：

foobar: {
  type: Object,
  default() {}
}

// 或箭头函数写法
foobar: {
  type: Object,
  default: () => {}
}

这种写法完全满足“用工厂函数返回默认值”的规范要求，同时解决了上述场景区分的问题——如果用户没有传入该Prop，foobar的值是undefined（假值）；如果用户主动传入了值（哪怕是空对象），foobar就是真值，这样就能准确判断用户是否传递了该Prop。

注意事项 #

• 这种写法仅适用于非必填的Prop，如果设置了required: true，默认值会被忽略，且用户未传Prop时会触发Vue的警告。
• 如果你的组件逻辑依赖foobar是一个对象类型，需要提前做类型判断（比如foobar ?? {}），避免后续操作出现Cannot read property 'xxx' of undefined的错误。

内容的提问来源于stack exchange，提问作者ckhatton