面试题：Vue 的 prop 是怎么进行验证的？可以设置默认值吗？

在 Vue 中，props 是用于父组件向子组件传递数据的机制。为了确保传递的数据符合预期，Vue 提供了 prop 验证功能，并且可以为 prop 设置默认值。以下是 prop 验证和设置默认值的详细说明：

1. Prop 验证

Vue 允许对 props 进行类型验证和自定义验证，以确保父组件传递的数据符合预期。

（1）基本类型验证

可以通过 type 属性指定 prop 的类型。Vue 支持以下原生类型：

String
Number
Boolean
Array
Object
Date
Function
Symbol

示例：

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

（2）多类型验证

type 可以是一个数组，用于支持多种类型。

示例：

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

（3）自定义验证函数

可以通过 validator 函数自定义验证逻辑。

示例：

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

2. 设置默认值

可以通过 default 属性为 prop 设置默认值。如果父组件没有传递该 prop，则会使用默认值。

（1）基本类型默认值

示例：

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

（2）对象或数组的默认值

对于对象或数组，default 必须是一个函数，返回默认值。

示例：

export default {
  props: {
    config: {
      type: Object,
      default() {
        return { key: 'value' };
      },
    },
    items: {
      type: Array,
      default() {
        return [1, 2, 3];
      },
    },
  },
};

3. 必填项

可以通过 required 属性指定 prop 是否为必填项。如果父组件没有传递必填的 prop，Vue 会抛出警告。

示例：

export default {
  props: {
    title: {
      type: String,
      required: true, // title 是必填项
    },
  },
};

4. 综合示例

以下是一个综合使用类型验证、默认值和必填项的示例：

export default {
  props: {
    // 基本类型验证
    title: {
      type: String,
      default: '默认标题',
    },
    // 多类型验证
    value: {
      type: [String, Number],
      required: true,
    },
    // 自定义验证
    age: {
      type: Number,
      validator(value) {
        return value >= 0 && value <= 120;
      },
    },
    // 对象默认值
    config: {
      type: Object,
      default() {
        return { key: 'value' };
      },
    },
    // 数组默认值
    items: {
      type: Array,
      default() {
        return [1, 2, 3];
      },
    },
  },
};