一、面试总体概述
1.1案例背景
本篇整理自视源股份前端开发岗位的面试参考资料。一面为技术面，题目集中在 Vue 双向绑定原理、flex 布局、浏览器缓存机制、事件委托与闭包作用域链，都是前端面试的经典考点。回答时能说出「原理 + 版本差异 + 实际用途」三层，比只背 API 更受认可。
1.2基本信息
| 公司 | 广州视源电子科技股份有限公司 |
| 岗位 | 前端开发 |
| 招聘类型 | 校招 |
| 用工形式 / 部门 | 直招 |
| 面试形式 | 线上或线下（视岗位而定） |
| 面试轮次 | 1 轮 |
| 题目数量 | 共 5 题，均附参考答案 |
| 整体难度 | ★★★☆☆ 中等 |
1.3高频考点
| 考点 | 分类 | 出现轮次 | 次数 |
|---|---|---|---|
| Vue 双向绑定原理与 Vue2/Vue3 差异 | 框架原理 | 技术一面 | 1 |
| flex 布局实现九宫格 | CSS 布局 | 技术一面 | 1 |
| 强缓存与协商缓存 | 浏览器与网络 | 技术一面 | 1 |
| 事件委托的原理与应用场景 | JavaScript | 技术一面 | 1 |
| 闭包与作用域链 | JavaScript | 技术一面 | 1 |
1.4备考建议
| 优先级 | 易失分点 | 准备动作 |
|---|---|---|
| P0 | 框架原理只说「用了 Proxy」，讲不出解决了什么问题 | 对比 Vue2 的 Object.defineProperty 与 Vue3 的 Proxy，说清数组监听、新增属性这两个痛点 |
| P1 | CSS 题只会背属性，写不出可用代码 | 手写一遍九宫格，把 flex-wrap、flex-basis、box-sizing 的组合和边框处理讲清楚 |
| P1 | 缓存机制混淆强缓存与协商缓存 | 按「是否发请求 → 命中条件 → 状态码」三列做对照表记住 |
| P2 | 闭包只会说「函数里的函数」 | 补充词法作用域、变量查找路径，以及闭包在防抖节流、模块封装中的实际用途 |
二、第 1 轮：技术一面
2.1面试形式与时长
| 轮次名称 | 技术一面 |
| 面试类型 | 技术面 |
| 本轮题量 | 5 题 |
2.2重点考查维度
- JavaScript —— 本组 2 道题
- 框架原理 —— 本组 1 道题
- CSS 布局 —— 本组 1 道题
- 浏览器与网络 —— 本组 1 道题
2.3面试真题与参考答案
Vue2 通过 Object.defineProperty 劫持数据属性的 getter/setter，配合发布-订阅模式实现；
Vue3 改用 Proxy 代理整个对象，支持数组和新增属性的监听，性能更好。
代价是 Proxy 需要运行时支持，因此 Vue3 不支持 IE11。
使用 display:flex; flex-wrap:wrap;，子元素设置 width:33.33%（或 flex:0 0 33.33%），配合 box-sizing:border-box 处理边框，避免边框把第三列挤到下一行。
强缓存通过 Cache-Control/Expires 判断，命中后直接使用本地缓存，不请求服务器；
协商缓存通过 Last-Modified/ETag 与服务器比对，未修改则返回 304，浏览器使用本地缓存。
前者省流量也省时间，后者至少有一次请求往返但能保证内容新鲜。
利用事件冒泡机制，把事件监听器绑定在父元素上，通过 event.target 判断实际触发的元素。
适用于动态生成的列表项、大量相似子元素的事件处理，能显著减少监听器数量。
闭包是函数与其词法作用域的组合，内部函数可以访问外部函数的变量。
作用域链是变量查找的路径：从当前作用域逐级向上查找，直到全局作用域。
实际用途包括数据私有化、防抖节流、模块封装；代价是变量无法及时回收，滥用会造成内存压力。
备考阶段，我发现很多同学容易陷入「不知道从哪准备」的困境。后来我向学员推荐了一款叫求职精灵的 AI 工具，上面收录了大量真实面经，还能直接搜到目标岗位的面试官常问什么、评分标准是什么。用它做 AI 模拟面试也特别方便，输入公司和岗位，系统自动生成仿真题目并给出反馈，练完之后心里更有底。感兴趣的同学可以直接访问 https://finsight.work/ 体验。
总结收尾
最后真心建议大家在备考阶段用一下求职精灵，网址是 https://finsight.work/ 。它能查岗位JD、一键修改简历、刷15万+道真题题库，还有AI模拟面试功能，整个备考流程基本都能覆盖，已经有超过6万学员用过，效果有口皆碑。别等到面试前一天才开始准备，现在就去用起来。机会永远留给有准备的人，希望读到这篇文章的每一位同学都能拿到心仪的offer。