前端/移动开发面试题更新 2026-08-05

在 Vue 中,如何对组件接收的 prop 执行类型校验?能否为 prop 配置默认值,具体该如何定义?

前端/移动开发技术原理Vue

考察说明

考察对 Vue 组件 prop 类型验证及默认值配置的理解。

回答思路

  1. 【回答框架 1】Vue 的 prop 验证通过组件选项中的 props 属性实现,可定义为对象形式,每个属性指定 type、required、default、validator 等选项。
  2. 【回答框架 2】type 可指定原生构造器(String、Number、Boolean、Array、Object、Date、Function、Symbol)或自定义构造函数,也可设为数组以允许多种类型;验证失败时 Vue 会在开发模式下发出警告。
  3. 【回答框架 3】default 用于设置默认值,当父组件未传入该 prop 时生效;对于对象或数组类型,默认值必须通过工厂函数返回,避免多个实例共享同一引用。
  4. 【回答框架 4】required 和 default 可以同时存在,但如果同时设置了 required: true 和 default,则当 prop 未传入时会使用默认值,并且不会触发缺失警告。
  5. 【回答框架 5】validator 用于自定义验证函数,接收 prop 值作为参数,返回布尔值;常用于复杂规则校验,如枚举值、范围检查等。
  6. 【关键点 1】prop 验证通过对象式 props 配置,支持 type、required、default、validator。
  7. 【关键点 2】对象或数组默认值必须使用工厂函数返回新实例。
  8. 【关键点 3】验证失败仅在开发模式有警告,不影响生产运行。
  9. 【易错点 1】不要把 prop 验证与运行时强制转换混淆,Vue 不会自动转换类型,只是警告。
  10. 【易错点 2】避免使用简单引用来定义引用类型默认值,会导致多个实例共享数据。
  11. 【易错点 3】自定义 validator 中不能使用 this,因为验证函数是独立调用的。