中小厂前端候选人简历面试拆解：从 HR 面、技术面到主管面的双赢提问法

中小厂前端候选人简历面试拆解：从 HR 面、技术面到主管面的双赢提问法

涂阿燃 · tuaran　前端 / AI Agent / 政企方案

在 2aran.com 写技术调研、AI 工程实践与独立开发笔记。关于站长 →
调研口径：本文只基于截图中的公开简历信息进行面试评估，不判断候选人真实人格、学历价值或最终录用结论。它更像一份中小厂前端面试官的拆解手册：怎么读这类简历，怎么问，怎么避免误伤，也怎么帮助候选人把能力讲清楚。

一、第一眼判断：值得进面，但不能直接按中高级看

如果我是中小厂前端面试官，这份简历的第一判断是：

值得进面，但要带着验证意识。

候选人的主线是前端开发，关键词集中在 Vue3、TypeScript、Pinia、Vue Router、Axios、Vite、Element Plus、Vant4、AntV X6、WebSocket、Fetch Stream、ReadableStream、RAG、Agent、markdown-it、TanStack Virtual。相比只写后台管理系统、增删改查、页面还原的简历，这份简历明显更有内容密度。

它的亮点有四个。

第一，技术栈较新。Vue3、组合式 API、TypeScript、Vite、Pinia 是当前中小厂前端岗位常见组合，不是过时栈。

第二，项目不是纯静态页面。双端一体化流程协同审批平台涉及流程画布、表单联动、权限、WebSocket、PC 和 H5 适配；多模态 Agent 智能对话平台涉及流式输出、Markdown 渲染、RAG 引用、虚拟列表。这些都比普通列表页更接近真实复杂业务。

第三，简历里出现了可追问的结果指标。例如 LCP 从 3.7s 降到 1.8s。这个指标不一定真实，但它至少给了面试官一个明确抓手。

第四，候选人知道如何组织项目叙述。项目描述里有业务场景、技术栈、项目工作、性能优化和跨端复用，说明候选人具备一定表达和包装能力。

但风险也很明显。

第一，技术点过密。一个本科候选人同时写流程平台、Monorepo、X6、WebSocket、RAG、Agent、Function Calling、ReadableStream、TanStack Virtual，如果没有真实项目背景，很容易是学习项目或包装项目。

第二，缺少工作经历支撑。截图里看不到实习、公司、岗位、时间线。没有真实组织环境，就要重点验证这些项目是课程项目、实习项目、外包项目、开源项目，还是个人模拟项目。

第三，AI 项目容易虚高。RAG、Embedding、相似度召回、Function Calling 这些词现在很常见，但前端候选人可能只是调用接口和渲染结果，并没有参与检索链路和工具调用编排。

第四，TypeScript 深度存疑。简历写了 TypeScript，但没有体现类型建模、泛型约束、接口抽象、组件 props 设计、API 响应类型规范等细节。

所以我会给一个谨慎判断：

维度	评估
面试价值	有
岗位定位	初级偏上到初中级前端
不能直接假设	中高级、架构能力、AI 工程深度
最大验证点	项目真实性、技术深度、独立交付能力
最大机会点	复杂业务前端、审批流、AI 对话交互、后台系统

二、中小厂真正要看的不是关键词，而是交付风险

中小厂和大厂的招聘逻辑不同。大厂可以把人放进成熟流程里慢慢培养，也可以让一个人只负责很窄的模块。中小厂更关心的是候选人入职后能不能快速进入业务现场。

面试官真正要判断的是这些问题。

• 他能不能看懂已有项目，而不是只会从零搭 demo？
• 他能不能独立完成一个复杂页面，包括接口联调、状态管理、异常处理、权限控制和上线后排错？
• 他能不能接受需求变化、文档不完整、后端接口临时调整？
• 他能不能把技术方案讲给产品、测试、后端听懂？
• 他遇到线上白屏、接口报错、性能下降时，是否知道从哪里查？
• 他是否诚实区分"我做的""团队做的""后端做的""我只是对接的"？

所以，这份简历的面试重点不是问"你懂不懂 RAG"，而是问：

你亲手解决过什么问题？你为什么这样设计？如果出问题你怎么定位？如果换一个业务场景你还能不能做出来？

这是中小厂面试最该守住的主线。

三、第一轮：HR 面，先验证动机、稳定性和项目真实性

HR 面不应该只是问薪资、到岗时间和家庭情况。对这类候选人，HR 面的核心是把基础风险过滤出来，避免技术面浪费时间。

3.1 自我介绍：看能否抓住业务和职责

可以这样问：

请用 3 分钟介绍自己，重点讲一个最能代表你能力的项目。

理想回答不应该只是背技术栈，而应该包含业务、职责和结果。

例如：

我主要做 Vue3 和 TypeScript 前端开发。做过流程审批平台和 AI 对话平台。审批平台里我负责流程画布、动态表单、权限路由和移动端适配；AI 对话项目里我负责流式输出、Markdown 渲染和长对话虚拟列表优化。我比较熟悉复杂交互和状态管理，也希望继续做企业业务系统方向。

如果候选人只说"我熟悉 Vue3、Pinia、Axios、Vite、Element Plus"，说明表达还停留在技能清单层。

3.2 项目性质：必须问清楚

可以直接问：

这两个项目分别是什么性质？课程项目、实习项目、外包项目、公司真实项目，还是个人项目？你负责哪些模块？哪些不是你做的？

这个问题很关键。优秀候选人不怕讲边界。

比较好的回答是：

流程审批平台是团队项目，我主要负责前端流程画布、表单联动、权限路由、移动端适配。后端流程引擎不是我做的，但我参与了接口字段讨论和联调。AI 项目是个人加团队协作项目，我主要做前端流式渲染和消息结构设计，Embedding 和召回在后端。

危险回答是：

整个项目都是我做的。

如果候选人说"全部我做"，技术面就要非常细地追问数据结构、接口设计、后端链路、部署方式和异常场景。真实全栈做过的人通常能讲出很多细节，包装型候选人很快会模糊。

3.3 岗位动机：看是否只追热点

可以问：

你现在更想做业务系统、AI 应用，还是前端工程化？为什么？

这份简历里 AI 词很多，中小厂要确认他是否愿意做真实业务。很多公司招前端，实际工作仍然是后台系统、移动端页面、权限、表单、报表、审批、营销活动、接口联调。如果候选人只想做大模型、Agent 和酷炫 demo，匹配度会有风险。

比较稳的回答是：

我对 AI 应用感兴趣，但现阶段希望以业务前端为主。审批流、权限、动态表单和复杂状态管理能打基础，AI 对话可以作为业务能力的扩展。

3.4 中小厂适配：把真实工作场景讲出来

可以问：

你能接受需求变化快、文档不完整、需要主动找产品和后端确认问题的工作方式吗？过去有没有类似经历？

这不是压榨式提问，而是让双方提前对齐现实。

中小厂常见环境是：需求会变，接口会晚，历史代码不完美，测试资源有限，前端要自己兜一部分体验和异常状态。如果候选人明显期待"所有需求都清楚、所有接口都稳定、只写新项目不维护旧项目"，入职后容易互相消耗。

3.5 HR 面判断标准

表现	判断
能清楚说明项目性质和个人职责	进入技术面
能接受业务系统和维护工作	加分
对薪资和岗位预期合理	加分
项目归属含糊，全部说成自己做	技术面重点核实
只想做 AI，不愿做业务页面	谨慎
沟通混乱，无法讲清经历	不推荐继续

四、第二轮：技术面，重点深挖真实实现

技术面应该分四层：基础能力、Vue3 工程能力、项目深挖、现场问题解决。

这份简历不适合只问算法题。中小厂前端岗位更应该用真实业务题判断候选人是否能交付。

4.1 JavaScript 和 TypeScript 基础

第一个问题：

Promise、async/await 的关系是什么？如果 async 函数里 throw error，外层怎么捕获？

追问：

如果多个接口并发请求，其中一个失败，但其他成功结果仍然要展示，你怎么处理？

期待答案包括 Promise.all、Promise.allSettled、try/catch、局部降级、错误提示和重试策略。候选人如果只会写 await request()，但讲不清错误传播和并发处理，说明基础还不够稳。

第二个问题：

TypeScript 里的 type 和 interface 有什么区别？你在项目里怎么给接口响应建模？

追问：

审批节点有人工审批、条件分支、抄送、结束节点，你会怎么设计类型？

比较好的方向是：

type NodeKind = 'approval' | 'condition' | 'cc' | 'end'

interface BaseNode {
  id: string
  type: NodeKind
  name: string
  position: { x: number; y: number }
}

interface ApprovalNode extends BaseNode {
  type: 'approval'
  approvers: string[]
}

interface ConditionNode extends BaseNode {
  type: 'condition'
  rules: Array<{ field: string; operator: string; value: unknown }>
}

type FlowNode = ApprovalNode | ConditionNode

候选人不一定要写得很完整，但应该知道联合类型、基础字段、类型收窄和业务差异字段。

第三个问题：

深拷贝、浅拷贝、结构化数据更新在 Vue 状态管理里分别会遇到什么坑？

这个问题可以验证候选人是否真的做过复杂表单和流程节点配置。流程平台里经常要复制节点、撤销修改、保存草稿、比较前后差异，只会 JSON.parse(JSON.stringify()) 不够。

4.2 Vue3 和工程能力

第一个问题：

ref 和 reactive 的区别是什么？reactive 解构后为什么可能丢响应式？怎么解决？

期待方向是响应式代理、ref 包装值、toRefs、storeToRefs、解构时保留响应式引用。

第二个问题：

Composition API 相比 Options API，最大的工程收益是什么？

不要只听"代码更简洁"。更好的回答应该是逻辑复用、关注点聚合、复杂页面拆分、可测试性和可维护性。

第三个问题：

Pinia 里哪些状态应该放 store，哪些应该留在组件内部？

这能看出候选人的状态边界意识。审批流的流程图数据、当前用户权限、全局菜单可以放 store；弹窗开关、局部输入框、临时 hover 状态通常不应该全部塞进全局。

第四个问题：

Vue Router 权限控制怎么做？动态路由是前端维护还是后端返回？刷新后动态路由丢失怎么处理？

期待答案包括 token、用户信息、菜单权限、路由守卫、白名单、动态 addRoute、刷新后重新拉权限、404 和无权限页处理。

4.3 审批流项目深挖

这份简历最强的部分是"双端一体化流程协同审批平台"，必须重问。

第一个问题：

这个审批平台的核心业务流程是什么？从用户发起审批到审批完成，前端参与了哪些环节？

候选人应该能讲清楚发起、表单填写、流程匹配、审批人处理、回退、抄送、通知、状态流转、历史记录等闭环。如果只会说"我做了流程节点编辑"，说明业务理解偏窄。

第二个问题：

AntV X6 具体承担什么？节点和边的数据结构怎么设计？

追问：

条件分支怎么表达？如果两个分支条件冲突，前端要不要校验？

期待方向包括节点 id、type、position、data、edges、source、target、condition、validateRules。复杂一点还可以问保存格式和回显格式是否一致，画布数据如何和后端流程定义互转。

第三个问题：

动态表单联动怎么做？例如 A 字段选择"报销"，B 字段才显示，C 字段变为必填。

这个问题非常实用。真实做过的人通常会提到 schema、字段依赖、visibleWhen、requiredWhen、watch、统一校验器、远程选项缓存。包装型候选人容易回答成"用 v-if 判断"。

第四个问题：

WebSocket 在项目里解决什么问题？为什么不用轮询？心跳和断线重连怎么实现？如何避免重复连接？

期待答案包括连接生命周期、鉴权、心跳包、超时检测、重连间隔、最大重试次数、页面卸载清理、消息去重、同用户多标签页处理。中小厂不要求候选人把所有边界都做完，但至少要知道这些坑存在。

第五个问题：

LCP 从 3.7s 降到 1.8s，你具体做了哪些优化？怎么测量？

这是核验项目真实性的关键指标。比较好的答案会提到 Lighthouse、Chrome DevTools Performance、Performance API、路由懒加载、组件按需加载、首屏接口并发、资源拆分、缓存、图片压缩、骨架屏、减少阻塞脚本。

如果候选人回答"就是用了懒加载""具体忘了""同事测的"，这个性能指标基本不能加分。

4.4 AI 对话项目深挖

AI 项目要特别注意前后端边界，不要把后端算法能力算到前端头上。

第一个问题：

为什么用 Fetch + ReadableStream 替代 EventSource？

比较好的答案是：Fetch 可以自定义 method、header、body，便于传上下文、鉴权和复杂参数；EventSource 使用简单，但很多场景主要是 GET 流，扩展性较弱。

第二个问题：

流式输出时，服务端返回的是完整 Markdown 吗？前端如何处理半截代码块、半截表格、半截链接？

真实做过流式 Markdown 的候选人会知道这里很麻烦。可以期待他提到 buffer 拼接、chunk 解码、节流渲染、markdown-it 重新解析、未闭合代码块处理、滚动跟随、异常中断后的状态恢复。

第三个问题：

TanStack Virtual 解决了什么问题？什么时候虚拟列表反而不适合？

好答案是：长对话消息多时减少 DOM 数量，降低渲染压力；但动态高度、图片异步加载、代码块展开、全文搜索、滚动定位都需要额外测量和缓存。候选人如果只说"优化性能"，深度还不够。

第四个问题：

RAG 里 Embedding 和相似度召回是在前端还是后端？前端具体参与了什么？

更可信的回答是：Embedding、向量化和召回通常在后端或向量数据库完成；前端负责上传状态、知识库选择、引用来源展示、召回片段可视化、流式答案渲染和异常提示。

如果候选人说"我在前端实现了 Embedding 和相似度召回"，就要继续问模型、向量维度、索引方式、召回阈值、性能和安全性。不是不可能，但概率较低。

4.5 技术面的现场题

与其出偏算法题，不如出两类业务题。

第一类，动态表单设计：

设计一个动态表单组件，支持字段显示隐藏、必填切换、远程选项、表单校验。请说出数据结构、组件拆分和校验流程。

第二类，流式输出实现：

写一个简化版函数，读取 ReadableStream，把内容逐步追加到页面，并处理异常和中断。

这类题更贴近他的简历，也更贴近中小厂真实工作。面试官可以看出候选人是否真的理解状态、异步、边界和用户体验。

4.6 技术面评价标准

表现	结论
能讲清业务、数据结构、异常和取舍	强烈推荐
能写页面，但复杂问题靠背答案	谨慎推荐
基础一般，但诚实且能推导	可培养
只会说关键词，追问就散	不推荐
项目归属明显夸大	高风险

五、第三轮：主管面，看是否能放进团队

主管面不要重复技术细节。主管面要判断：这个人入职后是否能和团队一起把事情做成。

5.1 业务推进能力

可以问：

如果产品让你两周内做一个审批流程配置器，但需求还没完全定，你会怎么推进？

好的回答应该包含 MVP 思维。

先确认核心闭环：节点创建、连线、保存、回显、发起审批。再拆优先级：第一版支持基础审批，条件分支、复杂校验、批量操作、审计日志可以后置。同时和后端约定流程定义数据结构，提前做 mock，不等接口才开始写页面。

这种回答说明候选人不是只等任务的人。

5.2 技术取舍能力

可以问：

如果你认为某个技术方案更好，但会拖慢交付，你怎么处理？

中小厂需要会权衡的人。好的回答不是"我坚持最优方案"，也不是"产品说什么就做什么"，而是：

先保证业务闭环和上线风险可控。复杂方案可以预留扩展点，把技术债记录清楚，后续根据业务价值安排重构。

5.3 协作能力

可以问：

后端接口经常变，产品需求也变，你怎么保证自己不被动？

期待答案包括接口文档、字段约定、mock、联调清单、变更记录、每日同步、风险提前暴露。

危险回答是：

等后端给我接口。

真实团队里，没有任何角色可以永远等别人准备好。

5.4 线上问题处理

可以问：

上线后用户反馈审批页面偶发白屏，你会怎么定位？

比较完整的定位链路是：

• 先确认影响范围：哪个页面、哪个用户、哪个浏览器、哪个环境。
• 看监控和日志：前端错误、接口状态、资源加载、路由跳转。
• 查最近发布：是否有权限路由、动态表单、流程画布相关改动。
• 尝试复现：同账号、同数据、同操作路径。
• 临时止血：回滚、关闭新功能、兜底空状态。
• 根因修复：补异常处理、补测试、补监控。

这道题很能区分"会写代码"和"能处理生产问题"。

5.5 成长方向

可以问：

你接下来一年最想补哪三块能力？

如果候选人回答 JS/TS 深度、复杂组件设计、工程化、性能监控、业务建模，说明他对前端成长路径有现实感。

如果只说"想学 AI、架构、大模型"，但讲不出现阶段短板，说明职业规划可能飘。

六、给候选人的简历修改建议

这份简历最大的问题不是内容少，而是每个点都写得太满。面试官会天然怀疑"是否都亲手做过"。建议从"技术词堆叠"改成"责任、动作、结果、边界"。

例如原写法：

对接 RAG 检索增强流程，实现文档分块、Embedding 向量化与相似度召回逻辑。

如果这些能力主要在后端，建议改成：

对接后端 RAG 检索链路，负责文档上传状态、知识库选择、引用来源展示、召回片段渲染和问答结果流式输出，提升答案可解释性。

这样更真实，也更容易赢得面试官信任。

再例如原写法：

基于 WebSocket 实现流程状态变更的即时同步，覆盖审批触发、回退通知及异常提醒。

可以改成：

负责审批状态实时通知模块，基于 WebSocket 封装连接、心跳、断线重连和消息去重逻辑，使审批触发、回退、异常提醒可在 PC 和 H5 两端同步展示，减少用户手动刷新。

修改原则有四条。

第一，少写"熟练掌握"，多写"解决了什么问题"。

第二，区分自己负责和团队负责。诚实写边界不会减分，反而加分。

第三，每个项目保留 2 到 3 个可深挖亮点，不要把所有热门词都塞进去。

第四，准备好每个指标的来源。如果写 LCP 从 3.7s 到 1.8s，就要知道怎么测的、优化了什么、是否可复现。

七、给面试官的建议：让面试双赢

双赢的面试不是降低标准，也不是把候选人问到说不出话。它应该帮助公司识别真实能力，也帮助候选人理解岗位要求。

第一，不要因为二本直接否掉。学历是信号，但不是交付能力本身。中小厂尤其应该看候选人是否能快速接业务、能否稳定沟通、能否处理真实问题。

第二，不要用大厂算法题筛业务前端。这份简历更适合考 Vue3、TypeScript、动态表单、权限路由、WebSocket、性能优化、流式渲染和线上排错。

第三，提问要从真实项目进入，再逐层追问。先问"你做了什么"，再问"为什么这样做"，最后问"出问题怎么办"。这样既能识别包装，也不会误伤表达慢但真的做过的人。

第四，把公司真实环境讲清楚。比如是否有历史包袱、是否经常改需求、是否有测试、是否需要兼顾 PC 和移动端、是否有 AI 业务。候选人也需要判断自己是否适合。

第五，面试后给明确反馈。即使不录用，也可以告诉候选人是基础不足、项目表达不足、岗位不匹配，还是薪资预期不匹配。这比一句"综合评估不合适"更有价值。

八、最终结论

这是一份有面试价值的前端简历。它展示了候选人对现代前端技术栈、复杂业务系统和 AI 对话交互的关注，也暴露出项目真实性和技术深度需要验证的问题。

如果候选人能把审批流项目讲透，包括 X6 数据结构、动态表单联动、权限路由、WebSocket 稳定性、性能优化细节，并且能诚实说明 AI 项目前后端边界，那么中小厂可以考虑录用，定位初中级前端比较合适。

如果候选人只会背 Vue3、RAG、Agent、WebSocket 这些关键词，追问实现细节就模糊，那么简历包装成分较高，不建议录用。

对公司来说，最好的方式是用真实业务题验证交付能力。对候选人来说，最好的方式是用真实项目细节证明自己。双方都不要停留在关键词里互相试探，这样面试才可能双赢。