Vue.js两种Props校验写法的差异及疑问解析

代码示例 #

写法一：完整配置校验规则 #

defineProps({
  firstName: {
    type: String,
    required: true
  },
});

写法二：类型简写形式 #

const props = defineProps({
  firstName: String
})

核心差异说明 #

这两种写法的区别不止是“第一种能定义多校验规则”，具体差异如下：

• 校验规则的扩展性
  写法一的对象配置支持完整的Props校验能力，除了type和required，还可以定义default（默认值）、validator（自定义校验函数）等进阶规则，示例：

  defineProps({
    firstName: {
      type: String,
      required: true,
      default: 'Guest',
      validator: (value) => value.length >= 2
    }
  })
  

  写法二是仅指定类型的简写，它等价于只配置type属性的对象写法：

  // 写法二的等价完整写法
  defineProps({
    firstName: {
      type: String
    }
  })
  

  这种简写无法设置必填、默认值、自定义校验等额外规则。

• 必填性约束
  写法一中required: true明确要求父组件必须传递firstName，否则开发环境下Vue会抛出警告；写法二未设置必填规则，默认允许父组件不传递该Prop，此时firstName的值为undefined。

• 返回值的使用习惯
  写法一没有接收defineProps的返回值，但实际上也可以像写法二那样用变量接收，方便在组件内部访问Props；写法二主动接收返回值props，是更明确的访问Props的方式——这只是编码习惯差异，两种写法都可以选择是否接收返回值。

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