验证VueProps类型，这几种方式你可能还没试用过

　　vue 要求任何传递给组件的数据，都要声明为  props 。此外，它还提供了一个强大的内置机制来验证这些数据。这就像组件和消费者之间的契约一样，确保组件按预期使用。
　　这节课我们来看下这个验证机制，它可以帮助我们在开发和调试过程中减少 but，增加我们的自信心(摸鱼时间)。 基础原始类型
　　验证基本类型比较简单，这里我们不过多的介绍，直接看下面例子： export default {   props: {     // Basic type check     //  (＂null ＂和 ＂undefined ＂值允许任何类型)     propA: Number,     // 多种可能的类型     propB: [String, Number],     // 必传的参数     propC: {       type: String,       required: true     },     // 默认值     propD: {       type: Number,       default: 100     },   } } 复杂类型
　　复杂类型也可以用同样的方式进行验证。 export default {   props: {     // 默认值的对象     propE: {       type: Object,       // 对象或数组的默认值必须从       // 一个工厂函数返回。该函数接收原始       // 元素作为参数。       default(rawProps) {         return { message: ＂hello＂ }       }     },     // 数组默认值     propF: {       type: Array,       default() {         return []       }     },     // 函数默认值     propG: {       type: Function,        // 不像对象或数组的默认值。       // 这不是一个工厂函数        // - 这是一个作为默认值的函数       default() {         return ＂Default function＂       }     }   } }
　　type  可以是以下之一：Number String Boolean Array Object Date Function Symbol
　　此外， type  也可以是一个自定义的类或构造函数，然后使用 instanceof  进行检查。例如，给定下面的类：class Person {   constructor(firstName, lastName) {     this.firstName = firstName     this.lastName = lastName   } }
　　我们可以把  Person  作为一个类型传递给 prop  类型:export default {   props: {     author: Person   } } 高级验证validator 方法
　　Props 支持使用一个  validator  函数。这个函数接受 prop 原始值，并且必须返回一个布尔值来确定这个 prop 是否有效。   prop: {       validator(value) {         // The value must match one of these strings         return [＂success＂, ＂warning＂, ＂danger＂].includes(value)       }     } 使用枚举
　　有时我们想把值缩小到一个特定的集合，这可以通过枚举来实现： export const Position = Object.freeze({   TOP: ＂top＂,   RIGHT: ＂right＂,   BOTTOM: ＂bottom＂,   LEFT: ＂left＂ });
　　它可以导入  validator  中使用，也可以作为默认值:
　　最后，父级组件也可以导入并使用这个枚举，它消除了我们应用程序中对魔法字符串的使用:    布尔映射
　　布尔类有独特的行为。属性的存在或不存在可以决定 prop 的值。      TypeScript
　　将Vue的内置 prop 验证与 TypeScript相结合，可以让我们对这一机制有更多的控制，因为TypeScript原生支持接口和枚举。 Interface
　　我们可以使用一个接口和  PropType  来注解复杂的 prop 类型。这确保了传递的对象将有一个特定的结构。 枚举
　　我们已经探讨了如何在 JS 中伪造一个枚举。这对于TypeScript来说是不需要的，它本向就支持了：  Vue 3
　　上述所有内容在使用 Vue 3与 选项API 或 组合API 时都有效。区别在于使用