验证VueProps类型，这些方法你可能没试过！

微信搜索【GreatMovetotheWorld】，第一时间与大家分享前端行业动态、学习路径等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。Vue要求传递给组件的任何数据都声明为props。此外，它还提供了一个强大的内置机制来验证此类数据。这就像组件和消费者之间的合同一样，确保组件按预期使用。本节课，我们就来看看这个验证机制，它可以帮助我们在开发调试过程中减少但增加自信心（钓鱼时间）。基本原始类型校验基本类型比较简单，这里不做过多介绍，只看下面的例子：exportdefault{props:{//基本类型校验//("null"和"undefined"值允许anytype)propA:Number,//多种可能的类型propB:[String,Number],//必需参数propC:{type:String,required:true},//默认值propD:{type:Number,default:100},}}复杂类型复杂类型也可以用同样的方式验证。exportdefault{props:{//默认值对象propE:{type:Object,//对象或默认值数组必须从//工厂函数返回。该函数接收原始//元素作为参数。default(rawProps){return{message:'hello'}}},//数组默认值propF:{type:Array,default(){return[]}},//函数默认值propG:{type:Function,//不同于对象或数组的默认值。//这不是工厂函数//-这是默认函数default(){return'Defaultfunction'}}}}type可以是以下之一：使用instanceof检查。例如，给定以下类：classPerson{constructor(firstName,lastName){this.firstName=firstNamethis.lastName=lastName}}我们可以将Person作为类型传递给proptype：exportdefault{props:{author:Person}}高级验证验证器方法Props支持使用验证器函数。此函数接受prop原始值，并且必须返回一个布尔值以确定prop是否有效。prop:{validator(value){//该值必须与这些字符串之一匹配return['success','warning','danger'].includes(value)}}使用枚举有时我们希望将值缩小到一个特定的集合，这可以通过枚举来实现：exportconstPosition=Object.freeze({TOP:"top",RIGHT:"right",BOTTOM:"bottom",LEFT:"left"});可以导入Validator也可以作为默认值：<脚本>从“./types”导入{位置}；导出默认值{道具：{位置：{验证器（值）{返回Object.values（位置）.includes（值）；},默认:Position.BOTTOM,},},};最后，父组件也可以导入和使用这个枚举，这消除了我们应用程序中魔术字符串的使用：布尔映射布尔类唯一行为属性的存在与否可以决定prop的值。TypeScript将Vue内置的propvalidation和TypeScript结合起来，这使得我们可以更好地控制这种机制，因为TypeScript原生支持接口和枚举。Interface我们可以使用一个接口和PropType来注解Complexprop类型。这个Enum我们已经探讨了如何在JS中伪造一个枚举。这对于支持它的TypeScript来说是不需要的：LEFT='left',}exportdefault{props:{position:{type:StringasPropType,default:Position.BOTTOM,},},};以上Vue3使用Vue3时一切正常使用选项API或组合API。不同之处在于使用或者使用TypeScript的或使用接口：最后，在When使用基于类型的声明，声明默认值。代码部署后可能存在的bug，真实情况下无法得知时间，之后为了解决这些BUG花费了大量的时间在日志调试上。顺便推荐一个好用的BUG监控工具Fundebug。总结作者：FotisAdamakis译者：前端小智来源：mediun原文：https://fadamakis.mdium.com/v...交流有梦想，有干货，微信搜索【大千世界】早点关注这个早上还是有洗碗的智慧。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi，里面有完整的测试站点、资料和我的一线厂商访谈系列文章。