前端面试复盘：技术深度与工程化思维
结束面试，坐下来缓了好久才平复心情。
这位候选人简历写得挺漂亮：'精通 Vue/React''熟练搭建前端架构''独立负责项目模块'……看着像是能立马上手干活的主力。可随便深挖几个问题，整个人就开始支支吾吾，技术漏洞全暴露了。
不是想嘲笑谁，而是觉得有必要把这场对话还原一下——给还在准备入行、实习、找工作的前端新人提个醒，也分享点真实职场里技术考察的'听音辨人'逻辑。
一、核心场景考察
Q1：你怎么判断一个前端项目的代码质量？
候选人回答： '代码能跑起来、功能正常就行。'
专业视角应该是： 功能正常只是底线。要看代码结构是否清晰（模块化、组件化），是否遵循团队的编码规范（ESLint/Prettier），是否有可维护性（注释、文档），是否考虑了性能（渲染优化、包体积）和安全性（XSS 防护）。更重要的是，是否有单元测试、可调试性如何。否则，项目初期能跑，后期必然变成'屎山'。
Q2：如果页面在生产环境突然白屏，你怎么排查？
候选人回答： '先刷新试试，不行就找后端。'
现实中，我们希望： 先打开浏览器控制台看报错信息，确认是资源加载失败、JS 执行错误还是接口异常；接着用 Sentry/监控平台定位错误堆栈和用户操作路径；如果是接口问题，查看网络请求状态和日志；如果是前端代码问题，结合 SourceMap 定位源码位置。最后，带着'错误现象 + 可能原因 + 临时解决方案'同步团队。主动定位问题，比甩锅更重要。
Q3：前端工程化你常用哪些工具或流程？
候选人回答： '就是用 Webpack 打包一下。'
可我们在意的是： 你有没有用 Babel 编译兼容、用 ESLint 规范代码、用 Husky 做 Git 提交前检查？会不会用 Tree Shaking 减少打包体积？是否配置过代码分割懒加载？是否用 CI/CD 自动化部署？更关键的是——你能否说清楚每一步解决什么问题？
二、技术栈高频面试题整理
为了帮助大家系统复习，以下整理了涵盖主流技术栈的核心面试题，建议结合源码和实际项目经验深入理解。
1. Vue 相关
- 说说 Vue 动态权限绑定渲染列表（权限列表渲染）
- Vue 用的哪种设计模式
- 说说 Vue 操作真实 DOM 的性能瓶颈
- Vue 中如何获取 DOM、操作 DOM、更新 DOM
- Vue 的双向数据绑定原理是什么
- MVVM 框架是什么
- 谈谈 Vue 的 Token 存储
- 知道 nextTick 的作用吗，谈谈对它的理解，是什么，怎么用
- nextTick 和 setTimeout 区别
- Vue 中为什么用虚拟 DOM 而不操作真实 DOM
- Vue 如何进行组件传值
- 说说 Vue 里面的父子通信
- 谈谈如何实现 Vue 组件通信和传值方式
- 说说 Vue 中 Key 值的作用
- 说说 Vue 中的虚拟 DOM 和 Diff 算法
- Vue 3.0 有了解过吗，你觉得 Vue 3.0 好吗，好在哪
- Vue 组件如何与 iframe 通信问题
2. React 相关
- 说说 React 中 onClick 绑定后的工作原理
- 说说 React 里面 bind 与箭头函数
- 说说 React 中的性能优化
- 高阶组件和高阶函数是什么
- setState 和 replaceState 的区别
- Redux 中核心组件有哪些，Reducer 的作用
- 什么是受控组件
- Hooks + Context 和 Redux 你是怎么选择的，都在什么场景下使用
- useEffect 模拟生命周期
- setState 更新之后和 useState 的区别
- React 父组件 Props 变化的时候子组件怎么监听
- useMemo 在 React 中怎么使用
