Prop 校验，Prop校验详解

摘要：根据提供的内容，经过校验，Prop是一种用于验证组件属性的方法，用于确保组件接收到的属性符合预期的类型和格式。通过Prop校验，可以确保组件的可靠性和稳定性，避免因传递错误的属性而导致的潜在问题。这种方法在开发过程中非常重要，有助于提高代码质量和用户体验。

Vue 组件提供了一种强大的机制来声明和校验传入的props，这不仅有助于开发时的错误预防，还可以为其他开发者使用组件时提供明确的指导。

一、声明 props 校验

为了声明对props 的校验，你可以使用defineProps() 宏并传入一个对象，该对象包含各种 props 校验选项。

defineProps({
  // 基础类型检查
  propA: Number, // 如果传递的值不是数字，将在控制台发出警告
  
  // 多种可能的类型
  propB: [String, Number], // propB 可以是字符串或数字
  
  // 必传，且为 String 类型
  propC: {
    type: String,
    required: true
  },
  
  // Number 类型的默认值
  propD: {
    type: Number,
    default: 100 // 如果没有传递 propD，其值将默认为 100
  },
  
  // 对象类型的默认值
  propE: {
    type: Object,
    default() { // 工厂函数，用于生成默认值
      return { message: 'hello' };
    }
  },
  
  // 自定义类型校验函数
  propF: {
    validator(value) { // 在 3.4+ 版本中，完整的 props 作为第二个参数传入（此处未展示）
      return ['success', 'warning', 'danger'].includes(value); // 确保值匹配这些字符串之一
    }
  },
  
  // 函数类型的默认值（此处展示了一种特殊情况）
  propG: {
    type: Function, // propG 应为函数类型
    default() { // 非工厂函数，用作默认值的函数
      return () => 'Default function'; // 默认函数的具体实现
    }
  }
});

二、运行时类型检查与自定义类校验

除了基本的类型检查外，Vue 还支持运行时类型检查以及自定义类校验，你可以使用原生构造函数或自定义的类作为type 的值。

假设有一个Person 类：

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
  }
}

你可以将其作为props 的类型：defineProps({ author: Person })，Vue 会通过instanceof Person 来校验author prop 的值是否是Person 类的一个实例，如果传递的值不是Person 的实例，Vue 会在控制台发出警告，你还可以使用自定义的校验函数来确保 prop 的值满足特定的条件或格式，这对于确保组件接收正确格式的数据非常有用。#### 三、其他细节与注意事项补充：所有 prop 默认都是可选的，除非明确声明了required: true，未传递的 prop 将默认为undefined（除 Boolean 外），而 Boolean 类型的未传递 prop 将默认为false，如果声明了默认值 (default)，那么在 prop 的值解析为undefined 时，无论 prop 是未被传递还是显式指定的undefined，都会改为默认值，当 prop 的校验失败时，Vue 会抛出一个控制台警告（仅在开发模式下），Vue 会尽最大努力在运行时按照 prop 的类型标注进行编译和优化。defineProps 会被编译为带有类型注解的形式，Vue 的属性校验机制为开发者提供了一种强大且灵活的方式来确保组件接收正确的数据格式和类型，从而提高了代码的可维护性和健壮性。