1. 面试题目 #

请设计一个Vue3表单组件，该组件包含一个邮箱输入框和提交按钮，并实现以下功能和要求：

2. 参考答案 #

2.1 技术要求 #

2.1.1 技术栈与API风格 #

• 明确使用Vue3 Composition API
• 使用TypeScript编写代码
• 遵循Vue3组件命名规范

2.1.2 表单验证功能 #

• 对邮箱输入进行格式校验
• 错误提示信息需显示在输入框下方
• 请说明你将选择哪种表单验证库（如Vuelidate或VeeValidate）及其理由

2.1.3 交互优化 #

• 提交按钮在表单验证未通过时应处于禁用状态
• 提交过程中，按钮应显示加载状态
• 防止用户重复提交

2.1.4 代码质量要求 #

• 包含必要的类型声明和代码注释
• 确保代码的可维护性和可测试性
• 使用Element Plus作为UI组件库

2.2 核心考察点 #

2.2.1 技术栈明确性 #

• 框架版本和API风格的选择
• 对Vue3 Composition API的理解和应用

2.2.2 功能边界清晰度 #

• 具体校验规则的实现
• 用户交互流程的设计

2.2.3 UI细节控制能力 #

• 错误提示位置的精确控制
• 按钮状态的管理

2.2.4 代码规范与质量 #

• TypeScript类型安全
• 代码可读性和可维护性

2.3 扩展问题 #

2.3.1 表单验证库选择 #

• 比较VeeValidate和Vuelidate的优缺点
• 在什么场景下会选择哪个库？

2.3.2 AI Prompt编写技巧 #

• 如何编写高质量的AI Prompt来生成符合要求的代码？
• 在Prompt中需要包含哪些关键要素？

2.3.3 最佳实践 #

• 如何确保生成的代码具有良好的可测试性？
• 在团队开发中如何保证代码的一致性？

2.4 评分标准 #

• 技术实现 (40%)：功能完整性、代码质量、技术选型合理性
• 用户体验 (30%)：交互流畅性、错误处理、状态反馈
• 代码规范 (20%)：TypeScript使用、命名规范、注释完整性
• 扩展思考 (10%)：对相关技术的理解和应用能力

这道面试题既考察了候选人的Vue3技术能力，又测试了其AI工具使用和Prompt编写能力，是一个综合性较强的技术面试题。