面试题：Vue 中 prop 验证的 type 类型有哪几种？

在 Vue 中，props 是用于父组件向子组件传递数据的机制。为了确保传递的数据符合预期，Vue 提供了 prop 验证功能，其中 type 是验证 prop 类型的关键属性。Vue 支持的 type 类型包括以下几种：

1. 基本类型

Vue 支持以下 JavaScript 原生类型作为 prop 的 type：

String：字符串类型。
Number：数字类型。
Boolean：布尔类型。
Array：数组类型。
Object：对象类型。
Function：函数类型。
Symbol：Symbol 类型（ES6 新增）。

export default {
  props: {
    title: String,
    count: Number,
    isActive: Boolean,
    items: Array,
    config: Object,
    callback: Function,
    uniqueKey: Symbol,
  },
};

2. 自定义构造函数

除了原生类型，type 还可以是一个自定义的构造函数。Vue 会通过 instanceof 检查 prop 是否为该构造函数的实例。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

export default {
  props: {
    author: Person,
  },
};

3. 多类型支持

type 可以是一个数组，用于支持多种类型的 prop。Vue 会依次检查 prop 是否符合数组中的任意一种类型。

export default {
  props: {
    value: [String, Number], // value 可以是字符串或数字
  },
};

4. 默认值和必填项

除了 type，props 还可以配置 default（默认值）和 required（是否必填）等属性。

export default {
  props: {
    title: {
      type: String,
      default: '默认标题',
    },
    count: {
      type: Number,
      required: true,
    },
  },
};

5. 自定义验证函数

如果 type 无法满足验证需求，可以使用 validator 自定义验证函数。

export default {
  props: {
    age: {
      type: Number,
      validator(value) {
        return value >= 0 && value <= 120; // 年龄必须在 0 到 120 之间
      },
    },
  },
};

6. 复杂类型验证

对于复杂的对象或数组类型，可以通过 validator 进一步验证其内部结构。

export default {
  props: {
    user: {
      type: Object,
      validator(value) {
        return value.name && value.age; // 确保 user 对象包含 name 和 age 属性
      },
    },
  },
};