像专业人士一样验证你的VueProps

Vue要求任何传递给组件的数据都被显式声明为props。此外，它还提供了一个强大的内置机制来验证此类数据。这就像组件和消费者之间的合同一样，确保组件按预期使用。让我们探索这个强大的工具，它可以帮助我们减少错误并增加我们在开发和调试过程中的信心。1.基础知识1.1原始类型验证原始类型就像为原始类型构造函数设置类型选项一样简单。exportdefault{props:{//基本类型检查//（`null`和`undefined`值将允许任何类型）propA:Number,//多种可能的类型propB:[String,Number],//必需的字符串propC:{type:String,required:true},//Number有默认值propD:{type:Number,default:100},}}1.2复杂类型复杂类型也可以用同样的方式验证。exportdefault{props:{//具有默认值的对象propE:{type:Object,//对象或数组默认值必须从工厂函数中获取。此函数接收原始组件接收的props作为参数。default(rawProps){return{message:'hello'}}},//有默认值的数组propF:{type:Array,default(){return[]}},//有默认值的函数propG:{type:Function,//与默认对象或数组不同，这不是工厂函数-这是用作默认值的函数default(){return'Defaultfunction'}}}}type可以是以下值之一:NumberStringBooleanArrayObjectDateFunctionSymbol另外，type也可以是自定义类或构造函数，断言会通过instanceof检查。例如，给定以下类：classPerson{constructor(firstName,lastName){this.firstName=firstNamethis.lastName=lastName}}你可以使它成为这样的道具类型。exportdefault{props:{author:Person}}2.高级验证2.1Validator函数props支持使用验证器函数，它接受props的原始值，必须返回一个布尔值来判断props是否有效。//Customvalidatorfunctionprop:{validator(value){//该值必须匹配这些字符串之一return['success','warning','danger'].includes(value)}},2.2使用枚举有时你想要将值缩小到特定的集合，这可以通过像这样伪造一个枚举来实现：exportconstPosition=Object.freeze({TOP:"top",RIGHT:"right",BOTTOM:"bottom",左：“左”}）；可以导入并在验证器中使用，或作为默认值。最后，父组件也可以导入并使用这个枚举，从而在我们的应用程序中消除魔术字符串的使用。2.3布尔投影Booleanprop具有独特的行为，属性的存在与否可以决定prop的值。3.TypeScript验证Vue内置prop将其与TypeScript相结合可以让我们更好地控制这种机制，因为TypeScript本身就支持接口和枚举。3.1接口我们可以使用接口和PropType工具来注释复杂的prop类型，这确保传递的对象将具有特定的结构。3.2真实枚举我们已经探索了如何在Javascript中伪造枚举。这对于TypeScript是不必要的，因为枚举是原生支持的。四、Vue3将Vue3与Options或CompositionAPI一起使用时，以上均有效.不同之处在于使用或者当使用带有或使用接口：最后，在使用基于类型的声明时声明默认值：end随着应用程序规模的增长，类型检查是防止错误的第一道防线。Vue内置的prop验证非常引人注目。与TypeScript相结合，它使您在正确使用组件接口、减少错误并提高整体代码质量和开发体验方面充满信心。原文：https://fadamakis.medium.com/validating-your-vue-props-like-a-pro-5a2d0ed2b2d6作者：FotisAdamakis