150 人厂前端岗面试：八股 + AI 编程连环追问

《面试题目》

八股

1. v-if 和 v-show 的区别？
2. 几种 for 循环对比，循环 10000 次用什么？

实习与项目

3. 实习里的低代码是你主导的？怎么做的？
4. 为了解决这个问题，除了低代码还有什么方法？
5. 你没用 AI 吗？它给你什么方案，你为什么选这个低代码？
6. 如果我是你的上级，我就是觉得这个低代码不行，你现场给我想一个解决方法。
7. MCP 了解吗？怎么封装一个 skill？
8. 这里的 AI 对话流是怎么样的？后端给你什么？你怎么处理？为什么非得用 requestAnimationFrame？真的很卡顿吗？
9. 你这里请求它的接口，需要携带多少个参数？
10. 这个项目你写上简历，你觉得你的亮点和优势在哪里？
11. 优化数据怎么来的？
12. 从后端到前端，你了解什么优化？哪些你真的落地过？
13. 了解后端鉴权怎么做吗？
14. 虚拟列表，有插件为什么不用？
15. 怎么样去做跨端？
16. iOS、安卓，你和他们联调有什么不同感受？
17. 了解什么数据库？
18. Java 了解吗？Node 呢？Python 呢？
19. 你觉得 Node 适合做什么？
20. 你觉得 Agent 是什么？所谓的 Agent 开发，和传统开发区别在哪？
21. 你们一个团队，需求到发版是怎么样的流程？
22. 出现排期冲突，你怎么沟通？
23. 一个需求三天要上线，你手上还有其它需求你怎么做？
24. AI 编程你怎么 review？人不多的话你自己怎么确保 AI 代码正确？
25. 一个项目完全交给 AI 做会出现什么问题？
26. OpenSpec 你怎么推广到全团队？
27. 你觉得达到什么水平就能看懂 AI 的代码？你怎么判断 AI 的方法可行？你觉得你的能力够吗？
28. 轮询后端，时间间隔多少？有问 AI 有什么更好的方法吗？会不会后端压力太大？
29. 你之前的实习中，你们团队是怎么排期的？开发自己决定还是上级给定时间？
30. 你觉得这行前景如何？
31. 实习最大的收获是什么？
32. 未来你对自己的规划是什么？全栈考虑吗？

反问环节得到的信息：公司主要业务是 B 端制造业，前后端技术栈为 Vue + .NET。

《参考解析》

v-if 和 v-show 的区别

核心差异在什么时候决定显示：v-if 是「真条件渲染」，编译期就是三元表达式/条件分支，值为假时元素根本不会创建，切换时走完整的销毁与重建（触发组件的 beforeUnmount/mounted，事件与内部状态全部丢失）；v-show 始终渲染，只是编译成 style.display = none 的指令，切换成本只有一次样式写入。

选型看切换频率和初始开销：频繁切换（tab、下拉、折叠）用 v-show，避免反复创建销毁；初始为假且很少显示（权限按钮、弹窗内容、大组件）用 v-if，省掉首次渲染成本。补充几个容易被追问的点：v-show 不支持 v-else，也不能用在 <template> 上；v-if 和 v-for 同用时 v-if 优先级更高（Vue 3 里 v-if 优先于 v-for，Vue 2 相反），所以别在同一个元素上同时写；v-if 的组件切换默认会重建，要保状态得配 <KeepAlive>。

几种 for 循环的对比，10000 次用什么

先给结论：循环 10000 次这个量级，几种写法都够快，差别在语义和可读性；真到大数组才谈性能。 然后按开销排序讲：

• for (let i = 0; i < n; i++)：无迭代器开销，可直接 break/continue，热路径首选。
• for...of：走迭代器协议，每次 next() 有对象分配开销，但语义清晰，可 break；数组上比经典 for 慢一档（V8 优化后差距不大）。
• forEach：无法 break（只能 throw 或 some/every 变通），回调有函数调用开销。
• for...in：枚举包括原型链上的可枚举属性，键是字符串，遍历数组性能最差且语义错误，只应用于对象。
• map/filter：会新建数组，额外内存分配，适合需要结果的场景，不适合纯副作用遍历。

所以答案要带条件：只是遍历或需要提前退出，10000 次用普通 for；需要可读性且逻辑复杂用 for...of；要产生新数组用 map。真正影响性能的是循环体内的 DOM 操作、重复计算（把 arr.length 缓存起来）、以及是否触发 layout thrashing，而不是循环写法本身。

AI 对话流为什么用 rAF，不用 rAF 会怎样

流式输出（SSE / fetch stream）里 token 是毫秒级高频到达的。如果每收到一个 token 就 setState 一次，React 会在一帧内合并多次渲染，但每次 setState 仍然要走调度、可能触发多次 render/commit，长回答下表现为明显掉帧和输入框卡顿；如果每片都直接改 DOM，则会造成 layout thrashing。

requestAnimationFrame 的作用是把渲染节流到浏览器帧率：SSE 回调只往缓冲区 push，rAF 回调在下一帧统一把缓冲区内容刷进状态/DOM，一帧最多更新一次。这样渲染次数从「token 数」降到「帧数」，且与浏览器绘制节奏对齐。回答时补一句诚实的边界：内容不多时看不出差别，卡顿是大回答量 + 长会话才暴露的，如果只答「为了性能」会被追问「真的很卡顿吗」就答不上来。其他可选方案也可以说：固定时间节流（16~50ms）、useSyncExternalStore + 外部缓冲、或者直接用成熟的流式渲染库，关键是让「数据到达频率」和「渲染频率」解耦。

虚拟列表有插件为什么不用

这题在考技术选型的判断力，不是考你会不会用插件。可以这样组织：

• 先确认需求：列表项高度是固定还是动态、是否需要不定高、是否需要吸顶/分组/无限加载。现成插件（vue-virtual-scroller、react-window、TanStack Virtual）对固定高度支持很好，动态高度要靠测量，遇到高度频繁变化的场景容易抖动。
• 再讲约束：包体积与依赖维护成本、和现有滚动容器/骨架屏/埋点的兼容、是否要支持 SSR 与首屏可见项。
• 最后讲自研的收益与代价：核心逻辑其实只有三段——容器总高度撑开、滚动时二分查找可见区间、按 transform 偏移渲染窗口。自研能完全控制测量与复用策略，但要自己处理滚动抖动、快速滚动时的白屏、以及 scrollTop 精度问题（移动端小数）。如果需求就是标准固定行高，用插件才是对的；说「自研更好」反而扣分。

Agent 是什么，和传统开发区别在哪

一句话：Agent 是把「下一步做什么」的决策权从代码交给了模型。传统开发的执行路径是开发者写死的 if/else 和调用顺序，输入输出确定、可穷举、可单测；Agent 由 LLM 在循环里决定调用哪个工具、传什么参数、什么时候结束，路径是运行时生成的，因此不可枚举。

由此带来四个工程差异：① 需要工具层（function calling / MCP）把能力暴露成有 schema 的接口；② 需要循环与终止条件（最大步数、超时、预算），否则会无限调用工具；③ 需要状态管理（多轮上下文、中间结果、可回放），LangGraph 这类框架解决的正是这个；④ 需要评测与护栏（结果正确性没法用断言判断，要靠规则校验 + 模型打分 + 人工抽检）。回答时最好带一个自己做过的例子，说明工具怎么定义、失败怎么重试、怎么防止它乱改代码。

AI 写的代码怎么 review

这是本场面试里最贴实际的一题，答得越具体越好：

• 流程护栏：跑得起来的才算代码——类型检查（tsc --noEmit）、lint、单测、构建必须绿；CI 卡点不能因为「是 AI 写的」而放宽。
• 控制改动面：要求 AI 小步提交，一次只改一个关注点，diff 越小越好审；大改动先让它写方案和影响面，再落代码。
• 抓住高风险区：并发/异步时序、边界与空值、错误处理、权限与越权、数据库事务与索引、以及所有涉及钱和删除的操作，逐行看；模板化的 CRUD、样式改动可以快过。
• 让 AI 自己解释并交叉验证：让它说明改动点和为什么，再拿另一个模型或自己复述一遍逻辑；对不确定的地方写一个能复现的测试来验，比读十遍代码可靠。
• 人要有判断力：跟面试官明确说「看不懂的代码我不会合」，面试官在这题上想听的就是这句话——原帖里虾皮面试官的观点是「既要有手搓能力，也要会驾驭 AI」，这里同理，答「AI 写的我基本不看」是最糟的答案。