前言

今天参加了一场前端实习面试，整场面试全部围绕前端高频基础知识 + 简单项目实战展开，覆盖 JS 异步、数据类型、CSS 布局、Vue、浏览器存储、性能优化、防抖节流、this 指向、Git、空值判断、接口缓存、Vue2 迁移 Vue3 等核心内容。面试结束后我完整复盘所有题目，整理自己当时的回答并优化成面试高分答案，既方便自己复习，也分享给正在准备面试的小伙伴。

一、面试原题 + 个人回答 + 优化标准答案

1. JS 异步处理方式

我的回答处理异步的方法是 Promise、async、await。

优化回答JS 是单线程语言，常用异步处理方式：

1. 回调函数：最早的方式，缺点是容易产生回调地狱；
2. Promise：ES6 推出，解决回调嵌套，支持链式调用；
3. async/await：基于 Promise 的语法糖，用同步写法写异步代码，可读性更强；
4. 其他：Generator、定时器、事件监听。

---

2. CSS 如何实现元素垂直居中

我的回答可以使用 Flex 和 Grid。

优化回答

1. Flex 布局（最常用）：

css

display: flex;
justify-content: center;
align-items: center;

1. Grid 布局：display: grid; place-items: center; 一行实现居中；
2. 传统方案：绝对定位 + transform、绝对定位四边为 0 + margin: auto。

---

3. sessionStorage 和 localStorage 的区别

我的回答简单区分存储时长与作用域。

优化回答共同点：同源策略、只能存字符串、容量约 5MB。区别

1. 生命周期：localStorage 永久存储，需手动清除；sessionStorage 会话存储，关闭标签页自动清空；
2. 作用域：localStorage 同源页面共享；sessionStorage 仅当前标签页有效。

---

4. JS 基本数据类型、引用类型及区别

我的回答基本类型：symbol、number、boolean、undefined、null、string；引用类型：object；区别：基本类型存在栈，引用类型数据存在堆，栈中存地址。

优化回答

• 基本类型（7 种）：String、Number、Boolean、Undefined、Null、Symbol、BigInt
• 引用类型：Object（对象、数组、函数、Date、正则等）

区别

1. 存储：基本类型值在栈；引用类型数据在堆，栈存引用地址；
2. 赋值：基本类型是值拷贝，互不影响；引用类型是地址拷贝，修改会互相影响；
3. 比较：基本类型比较值；引用类型比较内存地址。

---

5. Vue2 和 Vue3 的区别

优化回答

1. 响应式：Vue2 使用 Object.defineProperty；Vue3 使用 Proxy，支持数组、新增属性监听；
2. API：Vue2 选项式 API；Vue3 新增组合式 API（setup），逻辑复用更强；
3. 编译：Vue3 增加 PatchFlag、静态提升，diff 算法优化，性能更高；
4. 打包：Vue3 支持 Tree‑shaking，按需引入，体积更小；
5. 生命周期：组合式 API 使用 onMounted、onUpdated 等。

---

6. CSS 有哪些单位？vw、rem 含义

优化回答

• 绝对单位：px、pt、cm、mm

• 相对单位：rem、em、vw、vh、vmin、vmax、%、ch、ex

• 1vw = 视口宽度的1%

• 1rem = html根元素font‑size，默认浏览器根字体 16px

---

7. 前端常见性能优化

优化回答

1. 网络：资源压缩、Gzip、CDN、图片懒加载、webp 格式；
2. 代码：路由懒加载、组件按需引入、Tree‑shaking、防抖节流；
3. 渲染：减少重排重绘、使用 transform；
4. 缓存：HTTP 缓存、本地存储、接口缓存。

---

8. 防抖和节流

优化回答

• 防抖：触发后延迟执行，多次触发重新计时，适用于搜索、窗口 resize；
• 节流：一段时间内只执行一次，适用于滚动、拖拽、频繁点击。

一句话：防抖是等一等，节流是匀速执行。

---

9. 多层函数嵌套，内层拿不到 this 怎么办

优化回答

1. 使用箭头函数，继承外层 this；
2. 提前保存 const that = this；
3. 使用 bind、call、apply 手动绑定 this。

---

10. 常用 Git 命令

优化回答

bash

运行

git init          # 初始化仓库
git add .         # 添加到暂存区
git commit -m ""  # 提交本地
git branch        # 查看分支
git checkout 分支 # 切换分支
git pull          # 拉取远程
git push          # 推送远程
git merge         # 合并分支
git status        # 查看状态

---

11. JS 如何判断空值

优化回答

• null：val === null
• undefined：val === undefined
• 空字符串：val === ''
• 空数组：arr.length === 0
• 空对象：Object.keys(obj).length === 0
• 简单判断：!val 可判断 '',0,null,undefined,false

---

12. 如何解决接口缓存问题

优化回答

1. 前端层面

• 请求地址加时间戳 / 随机参数，避免浏览器强缓存：/api/list?_t=Date.now()
• axios 请求头设置 Cache-Control: no-cache
• 使用 POST 请求替代 GET（GET 更容易被缓存）

1. 后端层面

• 配置 HTTP 缓存头：Cache‑Control、Expires、ETag
• 接口版本控制，更新接口地址

1. 业务层面

• 本地手动清理缓存、增加刷新按钮、数据更新后主动清空缓存

---

13. 如果把 Vue2 老项目迁移到 Vue3，你会让 AI 帮你做什么？

优化回答（面试标准回答）我会让 AI 分阶段辅助我完成 Vue2 向 Vue3 迁移：

1. 依赖与环境升级：帮我升级 vue、vue‑router、vuex、axios 等依赖，生成 package.json 配置
2. 语法批量修改：批量将 Vue.use、选项式语法、过滤器、this.$set 等 Vue2 废弃语法改成 Vue3 写法
3. API 改造：将复杂组件从选项式 API 改成 setup 组合式 API，提供 ref、reactive、生命周期写法
4. 构建工具迁移：把 webpack 项目改成 Vite 配置，优化打包速度
5. 问题排查：识别 Vue2 兼容问题、响应式问题、生命周期变更导致的 bug，给出修复方案
6. 代码优化：迁移后做性能优化、代码规范检查、组件按需引入

简单说：AI 帮我做批量语法替换、配置修改、问题定位、代码重构，我做人工校验和业务逻辑把关。

二、面试复盘与反思

1. 本次面试覆盖基础知识点 + 简单项目实战题，从 JS、CSS 到 Vue、工程化、项目迁移都有涉及，非常贴近实习岗位真实考察方向。
2. 我现场回答思路都正确，但表达比较简短，缺少结构化总结，后续要训练分点回答。
3. 后续需要重点巩固：Vue2/Vue3 迁移、接口缓存、性能优化、手写防抖节流、this 指向、空值判断。
4. 基础扎实 + 具备简单项目迁移思维，是前端实习面试的加分项。

三、总结

前端实习面试不只是考基础，还会考察实际开发与项目迁移思路。本次面试所有题目都是高频重点，后续我会持续整理面试复盘、手写代码、查漏补缺，全力备战暑期实习。