睿联 秋招 前端 一面面经

《面试题目》

1. 自我介绍。
2. 选择前端的原因。
3. AI 对前端的冲击比较大，如果再给你一次选择机会，你还会选择前端这个方向吗？
4. 浏览器的事件循环机制是什么，它的出现是为了解决什么问题？
5. 你平时项目开发中会用到哪些宏任务？主要是为了解决什么问题？
6. 结合你的具体项目聊聊具体的应用场景。
7. 节流和防抖具体是在什么场景中会用到的？
8. 假如一个正在执行中的微任务不断追加微任务的话，这时候会出现什么问题？会阻塞页面渲染吗？
9. 如果一个执行中的宏任务不断积累宏任务，会产生什么影响？
10. Vue2 的 Options API 相比于 Vue3 的 Composition API，在开发上有什么不同或者说有什么优劣？
11. Vue2 跟 Vue3 的响应式原理上有什么区别？
12. Vue 的 nextTick 有用过吗？它的作用是什么？
13. React 跟 Vue 在开发上有什么区别？
14. 聊聊你对前端工程化的理解。
15. 项目、实习深挖。
16. 你平时工作是怎么将 AI 融入到开发当中的？
17. 代码质量怎么验收？
18. 如果转测阶段出现了 bug 的话，怎么去解决呢？
19. 如果发现 bug 是原有的设计有问题，这时候会重新设计吗？
20. 反问技术栈、业务（答 RN）。

《参考解析》

1. 事件循环要讲清”为什么”：JS 单线程执行，为了让耗时操作（网络、定时器、IO）不阻塞主线程才引入事件循环：调用栈清空后，先清空微任务队列，再取一个宏任务执行，如此循环，渲染时机夹在宏任务之间。它解决的是”单线程下如何并发处理异步任务”的问题，代价是所有同步代码都在主线程上，长任务会直接顶掉渲染。
2. 微任务无限追加 vs 宏任务持续积压：微任务队列会在当前宏任务结束后被一次性清空，如果微任务里继续产生微任务，这个队列就永远清不空——事件循环卡在微任务阶段，浏览器没有机会进入渲染步骤，页面表现为完全卡死（连点击都没反馈），所以递归里用 Promise.then 或 queueMicrotask 做循环是危险的。宏任务是一个一个执行的，每次之间会插入渲染和微任务检查，不会彻底饿死渲染，但队列越积越长，交互响应延迟线性增长，表现为”越来越卡”、输入掉帧；对策是任务分片（requestIdleCallback、setTimeout 切片）、虚拟列表，别在事件回调里堆大量同步计算。
3. 节流与防抖：防抖是等停止触发一段时间后再执行一次，适合搜索联想、表单校验、窗口 resize 结束后的重排；节流是固定频率执行，适合滚动加载、鼠标移动跟随、按钮防重复提交。要能说清两者在”高频事件”下的差异和各自的时间参数（leading/trailing 行为），以及为什么用它们能减少无效计算和请求。
4. Vue2 与 Vue3 的差异：响应式上 Vue2 用 Object.defineProperty 递归劫持属性的 getter/setter，数组需要重写七个方法、新增/删除属性要 $set 才能触发更新；Vue3 用 Proxy 代理整个对象，天然支持新增删除、数组索引和 Map/Set，并且是惰性的（访问到才递归）。API 上 Options API 按选项（data/methods/computed）切分，逻辑分散但上手快、约定清晰；Composition API 按功能组织逻辑、可以在 setup 里自由组合与复用（composable），类型推导也更友好，代价是团队需要约定代码组织方式。
5. nextTick 与 AI 融入开发：nextTick 是在 DOM 更新完成后执行回调——Vue 的响应式更新是异步批量的，改完数据立刻读 DOM 拿到的还是旧值，所以要在 nextTick 里读取或用它做依赖新 DOM 的操作，它内部走的也是微任务队列。至于 AI 融入开发，给出可验证的做法而不是口号：用 AI 做样板代码和单测草稿、把重复的 CR 规则写成 prompt 模板、用 AI 辅助定位报错和读陌生代码，但结论必须自己验证、进入评审前要过类型检查和测试；同时把”哪些场景不用 AI”讲清楚（涉及隐私数据、核心业务逻辑）。
6. 代码质量与 bug 处理：代码质量验收靠可执行的规则而不是主观感觉——lint/format、类型检查、单测覆盖率、CR checklist、性能与埋点门禁。转测阶段发现 bug，先按能否复现、影响面、是否有规避方案定级，再决定是热修还是排进版本；如果 bug 根因是原设计有问题，先把设计缺陷讲清楚（边界假设错在哪、改动的牵连面），再评估是打补丁还是重构，不要为了赶版本在错误设计上继续叠逻辑。