高频面试题

要让 AI 生成一个带表单验证的 Vue3 组件，请写出包含关键要素的 Prompt

这题不是考 Vue3 语法背诵，而是考你能否把代码生成需求描述到模型可执行、可验证、少返工。

适合阶段：前端 AI 提效 / Prompt 实战核心能力：上下文约束 · 代码验收 · 输出控制

面试官角度分析，想考什么

• 代码生成 Prompt 应该包含哪些信息？
  考察是否会给技术栈、组件目标、字段、交互和验收标准。
• 如何约束 AI 不生成不可用代码？
  考察版本、依赖、样式、类型和边界条件说明。
• 表单验证需求怎么描述？
  考察字段规则、错误提示、提交状态和异常处理。
• 如何让输出便于落地？
  考察文件结构、代码块、说明范围和测试方式。

可直接抄走的 30 秒参考答案

我会把代码生成 Prompt 写成工程需求，而不是一句“帮我写个 Vue 表单”。要包含 Vue3、Composition API、TypeScript、是否用 UI 库；列清字段、默认值和验证规则；说明失焦、提交、loading、错误提示、成功失败等交互；再约束输出为完整 SFC、不要解释文字，并给验收标准。这样模型生成的代码更接近可直接落地。

面试回答详解，知其所以然

这类题的核心是“把需求写成工程任务”。一个好的代码生成 Prompt 至少要包含上下文、目标、输入、约束、输出和验收六部分。

1. 关键要素

• 技术栈：Vue 3、Composition API、TypeScript、是否使用 UI 库。
• 组件目标：登录、注册、地址、用户资料还是业务表单。
• 字段定义：字段名、类型、默认值、是否必填。
• 验证规则：必填、长度、正则、跨字段校验、异步校验。
• 交互状态：错误提示、禁用提交、loading、提交成功和失败。
• 样式约束：使用现有 class、CSS module、Tailwind 或 scoped CSS。
• 输出要求：只输出单文件组件，或拆分 composable、类型文件。
• 验收标准：如何判断代码可用。

2. 可直接使用的 Prompt

你是一个资深前端工程师。请基于 Vue 3 + Composition API + TypeScript 生成一个注册表单组件。

技术约束：
- 使用单文件组件 SFC，文件名为 RegisterForm.vue。
- 使用 <script setup lang="ts">。
- 不依赖第三方 UI 组件库和表单库。
- 样式使用 scoped CSS。
- 代码应能在标准 Vue 3 项目中直接运行。

表单字段：
- username：用户名，必填，3-20 个字符，只允许字母、数字和下划线。
- email：邮箱，必填，必须符合常见邮箱格式。
- password：密码，必填，至少 8 位，必须包含字母和数字。
- confirmPassword：确认密码，必填，必须和 password 一致。
- agreeTerms：是否同意条款，必须勾选。

交互要求：
- 字段失焦后显示对应错误提示。
- 提交时校验全部字段。
- 校验不通过时阻止提交，并聚焦第一个错误字段。
- 提交过程中按钮展示 loading 状态并禁用。
- 模拟 submitForm 方法，成功后清空表单并展示成功提示。
- 提交失败时展示通用错误提示。

输出要求：
- 只输出完整 Vue 单文件组件代码。
- 不要输出解释文字。
- 错误提示文案使用中文。
- 代码中保留少量必要注释，避免过度注释。

验收标准：
- 所有字段都有双向绑定。
- 所有验证规则都有实现。
- 错误提示不会在用户首次输入前全部显示。
- TypeScript 无明显 any 滥用。

3. 为什么这个 Prompt 更稳

• 它限定了 Vue 版本、写法和依赖，减少模型自由发挥。
• 它把字段和验证规则逐项列出，避免遗漏。
• 它描述了表单交互生命周期，而不是只说“带校验”。
• 它给了输出边界，避免模型输出一堆解释。
• 它给了验收标准，便于生成后自动或人工检查。

4. 可以进一步强化的地方

如果项目有既有规范，还要补充：

• 现有目录结构和组件命名规范。
• 设计系统按钮、输入框和错误样式。
• API 请求函数签名。
• ESLint、Prettier 和 TypeScript 严格模式要求。
• 单元测试框架和测试用例要求。

面试官追问3个问题

追问一：如果 AI 生成的代码用了你不想要的依赖怎么办？

• 考察点：约束完整性。
• 回答方向：在 Prompt 中明确依赖白名单或禁止第三方库，并在验收标准中加入“不得新增依赖”。

追问二：如何让模型生成测试？

• 考察点：可验证性。
• 回答方向：补充测试框架、测试文件名和必须覆盖的用例，如必填、邮箱格式、密码一致、提交成功失败。

追问三：跨字段校验怎么写进 Prompt？

• 考察点：业务规则表达。
• 回答方向：明确字段依赖关系和触发时机，例如 confirmPassword 必须与 password 一致，password 变化后要重新校验确认密码。

扩展知识

代码生成 Prompt 的通用模板

角色和目标
-> 技术栈和版本
-> 输入数据和业务规则
-> 交互和异常状态
-> 输出文件和格式
-> 验收标准

什么时候要给示例代码

如果项目已有设计系统或组件库，应该给一小段现有组件写法，让模型模仿风格。示例越贴近项目，生成结果越容易合并。