前端面试复盘：透过问题看技术深度与工程素养

结束面试，坐下来缓了好久才平复心情

这位候选人，简历写得挺漂亮：'精通 Vue/React''熟练搭建前端架构''独立负责项目模块'……看着像是能立马上手干活的主力。可随便深挖几个问题，整个人就开始支支吾吾，技术漏洞全暴露了。

不是想嘲笑谁，而是觉得有必要把这场对话还原一下——给还在准备入行、实习、找工作的前端新人提个醒，也分享点真实职场里技术考察的'听音辨人'逻辑。

一、核心场景考察

Q1：你怎么判断一个前端项目的代码质量？

她说：'代码能跑起来、功能正常就行。'

专业视角应该是：功能正常只是底线。要看代码结构是否清晰（模块化、组件化），是否遵循团队的编码规范（ESLint/Prettier），是否有可维护性（注释、文档），是否考虑了性能（渲染优化、包体积）和安全性（XSS 防护）。更重要的是，是否有单元测试、可调试性如何。否则，项目初期能跑，后期必然变成'屎山'。

Q2：如果页面在生产环境突然白屏，你怎么排查？

她答：'先刷新试试，不行就找后端。'

现实中，我们希望：先打开浏览器控制台看报错信息，确认是资源加载失败、JS 执行错误还是接口异常；接着用 Sentry/监控平台定位错误堆栈和用户操作路径；如果是接口问题，查看网络请求状态和日志；如果是前端代码问题，结合 SourceMap 定位源码位置。最后，带着'错误现象 + 可能原因 + 临时解决方案'同步团队。主动定位问题，比甩锅更重要。

Q3：前端工程化你常用哪些工具或流程？

她说：'就是用 Webpack 打包一下。'

可我们在意的是：你有没有用 Babel 编译兼容、用 ESLint 规范代码、用 Husky 做 Git 提交前检查？会不会用 Tree Shaking 减少打包体积？是否配置过代码分割懒加载？是否用 CI/CD 自动化部署？更关键的是——你能否说清楚每一步解决什么问题？

二、技术栈常见问题清单

除了上述场景题，以下领域也是高频考点，建议对照自查：

Vue 相关

1. 说说 vue 动态权限绑定渲染列表〔权限列表渲染)
2. Vue 用的哪种设计模式
3. 说说 vue 操作真实 dom 性能瓶颈
4. Vue 中如何获取 dom、操作 dom、更新 dom
5. Vue 的双向数据绑定原理是什么
6. mvvm 框架是什么
7. 谈谈 Vue 的 token 存储
8. 知道 nextTick 的作用吗，谈谈对它的理解，是什么，怎么用
9. nextTick 和 setTimeout 区别
10. vue 中为什么用虚拟 dom 而不操作真实 dom
11. Vue 如何进行组件传值
12. 说说 vue 里面的父子通信
13. 谈谈如何实现 vue 组件通信和传值方式
14. 说说 vue 中 Key 值的作用
15. 说说 vue 中的虚拟 dom 和 diff 算法
16. vue3.0 有了解过吗，你觉得 vue3.0 好吗，好在哪
17. VUE 组件如何与 iframe 通信问题

React 相关

1. 说说 React 中 onClick 绑定后的工作原理
2. 说说 react 里面 bind 与箭头函数
3. 说说 react 中的性能优化
4. 高阶组件和高阶函数是什么
5. setState 和 repalceState 的区别
6. redux 中核心组件有哪些，reducer 的作用
7. 什么是受控组件
8. hooks+context 和 redux 你是怎么选择的，都在什么场景下使用
9. useffect 模拟生命周期
10. setsate 更新之后和 usestate 的区别
11. react 父组件 props 变化的时候子组件怎么监听
12. usememo 在 react 中怎么使用
13. React Hooks 各种函数介绍
14. React Component 和 Purecomponent 区别
15. hooks 相对于 class 的优化
16. hooks 父组件怎么调用子组件的方法
17. 讲一下 react 中的通信
18. react 通过什么方法修改参数
19. 说你对 react native 的了解