全栈开发工程师前端面试准备

作为全栈开发工程师，前端不一定要求达到专职前端架构师深度，但必须能独立完成页面开发、接口联调、状态管理、工程构建、性能优化和线上问题排查。

一、前端需要掌握的技术栈

1. 基础三件套

HTML

• 语义化标签：header、nav、main、section、article、footer
• 表单元素：input、select、textarea、button
• 浏览器渲染机制：DOM、CSSOM、渲染树、重排、重绘
• SEO 和可访问性基础

CSS

• 盒模型、浮动、定位、层叠上下文
• Flex 布局、Grid 布局
• 响应式布局、媒体查询
• CSS 变量、预处理器 Less/Sass
• 常见 UI 适配：移动端适配、暗色模式、主题色切换

JavaScript

• 基础类型、引用类型、作用域、闭包、原型链
• 事件循环、宏任务、微任务
• Promise、async/await
• 防抖、节流
• 深拷贝、浅拷贝
• ES6+ 常用语法
• 模块化：CommonJS、ES Module

2. TypeScript

• 类型声明、接口、泛型
• 联合类型、交叉类型、类型断言
• 工具类型：Partial、Pick、Omit、Record
• Vue 和 React 项目中的组件 Props 类型定义
• 接口返回数据的类型约束

3. Vue 技术栈

• Vue 2 和 Vue 3 基础差异
• Options API 和 Composition API
• 响应式原理：Object.defineProperty、Proxy
• 组件通信：props、emit、provide/inject、Pinia
• Vue Router 路由配置、路由守卫、动态路由
• Pinia/Vuex 状态管理
• computed、watch、watchEffect
• 插槽、动态组件、异步组件
• Element Plus、Ant Design Vue 等 UI 框架

4. React 技术栈

• JSX 语法
• 函数组件和类组件
• Hooks：useState、useEffect、useMemo、useCallback、useRef
• 组件通信：props、Context、状态提升
• React Router
• Redux、Zustand、MobX 等状态管理
• 虚拟 DOM、Diff 算法
• 受控组件和非受控组件
• React 性能优化

5. 前端工程化

• Vite、Webpack 基础配置
• npm、pnpm、yarn 包管理
• ESLint、Prettier、Stylelint
• 环境变量配置：开发、测试、生产
• 代码分包、懒加载、Tree Shaking
• 前端部署：Nginx、静态资源缓存、CDN
• Git 分支管理和代码规范

6. 网络和接口联调

• HTTP 常见状态码
• GET、POST、PUT、DELETE 区别
• Cookie、Session、Token、JWT
• 跨域问题和 CORS
• Axios 请求封装
• 请求拦截器、响应拦截器
• 接口错误统一处理
• 文件上传、下载、断点续传基础

7. 性能优化

• 首屏加载优化
• 图片懒加载、路由懒加载
• 静态资源压缩和缓存
• 防抖、节流
• 虚拟列表
• 减少不必要的组件渲染
• 接口合并、缓存接口结果

8. 前端安全

• XSS 攻击和防护
• CSRF 攻击和防护
• Token 存储安全
• 输入校验和输出转义
• 权限按钮和路由权限控制

二、全栈开发工程师常见前端面试题

问题 1：HTML 语义化有什么作用？

回答思路

HTML 语义化是指使用有明确含义的标签描述页面结构，例如用 header 表示头部，用 nav 表示导航，用 main 表示主体内容。

关键点

• 提高代码可读性。
• 有利于 SEO。
• 有利于屏幕阅读器等无障碍访问。
• 方便团队协作和后期维护。

问题 2：CSS 盒模型是什么？

回答思路

盒模型描述的是元素在页面中占据空间的计算方式，主要由 content、padding、border、margin 组成。

关键点

• 标准盒模型：元素宽度只包含 content。
• IE 盒模型：元素宽度包含 content + padding + border。
• 可以通过 box-sizing: border-box 改变盒模型计算方式。

问题 3：Flex 布局常用属性有哪些？

回答思路

Flex 主要用于一维布局，可以方便地实现水平垂直居中、等分布局和自适应布局。

关键点

• 容器属性：display: flex、flex-direction、justify-content、align-items、flex-wrap
• 子元素属性：flex、order、align-self
• 水平垂直居中常用写法：justify-content: center; align-items: center;

问题 4：JavaScript 中闭包是什么？有什么应用场景？

回答思路

闭包是指函数可以访问其外部作用域中的变量，即使外部函数已经执行结束，这些变量仍然可以被内部函数引用。

应用场景

• 封装私有变量。
• 实现防抖和节流。
• 保存函数执行上下文。
• 实现函数柯里化。

问题 5：事件循环是什么？

回答思路

JavaScript 是单线程执行的，事件循环用于协调同步任务、宏任务和微任务的执行顺序。

执行顺序

1. 先执行同步代码。
2. 同步代码执行完后，清空微任务队列。
3. 执行一个宏任务。
4. 再次清空微任务队列。

常见任务

• 微任务：Promise.then、MutationObserver
• 宏任务：setTimeout、setInterval、setImmediate

问题 6：Promise 和 async/await 的关系是什么？

回答思路

async/await 是基于 Promise 的语法糖，可以让异步代码写起来更像同步代码。

关键点

• async 函数默认返回 Promise。
• await 后面通常跟 Promise。
• await 会等待 Promise 状态完成后再继续执行后续代码。
• 异常可以通过 try...catch 捕获。

问题 7：防抖和节流有什么区别？

回答思路

防抖和节流都是控制函数执行频率的手段。

区别

• 防抖：一段时间内多次触发，只执行最后一次。
• 节流：一段时间内多次触发，按固定间隔执行。

应用场景

• 防抖：搜索框输入联想、窗口大小变化后计算布局。
• 节流：滚动加载、按钮连续点击限制。

问题 8：Vue 2 和 Vue 3 有什么区别？

回答思路

Vue 2 和 Vue 3 都是 Vue 框架，但 Vue 3 在响应式原理、API 设计、TypeScript 支持、性能优化和工程化体验上都有明显升级。

关键点

1. 响应式原理不同。 Vue 2 使用 Object.defineProperty 劫持对象属性，Vue 3 使用 Proxy 代理整个对象。

2. API 风格不同。 Vue 2 主要使用 Options API，把 data、methods、computed、watch 分开写；Vue 3 支持 Composition API，可以把同一块业务逻辑组织在一起。

3. TypeScript 支持不同。 Vue 2 对 TypeScript 支持相对一般；Vue 3 使用 TypeScript 重写，对类型推导和大型项目更友好。

4. 性能不同。 Vue 3 在编译优化、Tree Shaking、虚拟 DOM、静态节点提升等方面做了优化，整体性能更好，包体积也更容易控制。

5. 多根节点支持不同。 Vue 2 组件模板必须只有一个根节点；Vue 3 支持 Fragment，可以有多个根节点。

6. 生命周期写法不同。 Vue 2 使用 created、mounted 等选项；Vue 3 在 Composition API 中使用 onMounted、onUpdated、onUnmounted 等函数。

7. 状态管理推荐不同。 Vue 2 项目常用 Vuex；Vue 3 项目更推荐 Pinia。

响应式差异

Vue 2 的 Object.defineProperty 只能劫持已有属性，所以新增属性需要使用 Vue.set，数组变更也需要做额外处理。

Vue 3 的 Proxy 可以直接代理整个对象，能够监听属性新增、删除、数组下标变化等操作，响应式能力更完整。

面试总结

可以这样回答：

Vue 3 可以理解为 Vue 2 的一次全面升级。它最大的变化是响应式从 Object.defineProperty 换成了 Proxy，同时引入 Composition API，让复杂业务逻辑更容易复用和维护。另外 Vue 3 对 TypeScript、性能优化、Tree Shaking、多根节点和工程化支持都更好，所以新项目一般优先选择 Vue 3。

问题 9：Vue 中 computed 和 watch 有什么区别？

回答思路

computed 适合根据已有状态计算新值，watch 适合监听数据变化后执行副作用。

区别

• computed 有缓存，依赖不变时不会重新计算。
• watch 更适合异步请求、日志记录、复杂业务处理。
• computed 强调“计算结果”，watch 强调“监听变化后做事”。

问题 10：Vue 组件之间如何通信？

回答思路

Vue 组件通信要根据组件关系选择不同方案。

常见方式

• 父传子：props
• 子传父：emit
• 跨层级：provide/inject
• 全局状态：Pinia 或 Vuex
• 路由传参：query、params

问题 11：Vue Router 的路由守卫有哪些？

回答思路

路由守卫用于控制页面跳转流程，常用于登录校验、权限控制和页面离开确认。

常见守卫

• 全局前置守卫：beforeEach
• 全局后置守卫：afterEach
• 路由独享守卫：beforeEnter
• 组件内守卫：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

问题 12：Pinia 和 Vuex 有什么区别？

回答思路

Pinia 是 Vue 官方推荐的新一代状态管理库，相比 Vuex 更轻量，TypeScript 支持更好。

关键点

• Pinia 没有 mutation，可以直接在 action 中修改状态。
• Pinia 写法更接近 Composition API。
• Pinia 模块拆分更自然。
• Vue 3 项目优先选择 Pinia。

问题 13：React 中 Hooks 解决了什么问题？

回答思路

Hooks 让函数组件也可以拥有状态和生命周期能力，减少类组件复杂度。

关键点

• useState 管理组件状态。
• useEffect 处理副作用。
• useMemo 缓存计算结果。
• useCallback 缓存函数引用。
• 自定义 Hook 可以复用逻辑。

问题 14：useEffect 的依赖数组有什么作用？

回答思路

依赖数组决定 useEffect 什么时候执行。

常见情况

• 不传依赖数组：每次渲染后都执行。
• 传空数组：组件挂载后执行一次。
• 传具体依赖：依赖变化时执行。

注意点

如果依赖漏写，可能出现闭包数据过期的问题。

问题 15：React 中受控组件和非受控组件有什么区别？

回答思路

受控组件的表单数据由 React 状态管理，非受控组件的数据由 DOM 自己管理。

区别

• 受控组件：通过 value 和 onChange 控制输入。
• 非受控组件：通过 ref 获取 DOM 值。
• 表单逻辑复杂时，通常优先使用受控组件。

问题 16：React 为什么需要 key？

回答思路

key 用于帮助 React 在列表渲染时识别元素身份，提高 Diff 效率，并避免错误复用组件状态。

注意点

• key 应该稳定且唯一。
• 不推荐使用数组下标作为 key。
• 列表顺序会变化时，使用下标可能导致渲染错误。

问题 17：Vue 和 React 有什么区别？

回答思路

Vue 和 React 都是组件化前端框架，都可以用来构建单页面应用，但它们在设计理念、模板语法、响应式机制、状态更新方式和生态选择上有明显区别。

对比点

1. 写法不同。 Vue 默认使用模板语法，把 HTML、CSS、JavaScript 按单文件组件组织；React 使用 JSX，把 UI 结构和 JavaScript 逻辑放在一起。

2. 数据响应方式不同。 Vue 通过响应式系统自动追踪依赖，数据变化后精准更新相关视图；React 通过 setState 或 Hooks 更新状态，状态变化后触发组件重新渲染，再通过 Diff 算法更新 DOM。

3. 学习成本不同。 Vue 语法更接近传统 HTML、CSS、JavaScript，上手相对简单；React 更强调 JavaScript 能力，对函数式编程、闭包、Hooks 理解要求更高。

4. 生态风格不同。 Vue 官方生态更完整，例如 Vue Router、Pinia 都是官方推荐方案；React 本身更轻，路由、状态管理、数据请求等更多依赖社区方案。

5. 组件逻辑组织方式不同。 Vue 3 可以使用 Composition API 组织逻辑；React 主要通过 Hooks 和自定义 Hook 复用逻辑。

6. 灵活度不同。 Vue 约定更多，团队协作时风格更统一；React 更灵活，但也更依赖团队规范。

7. 适用场景不同。 Vue 很适合中后台、管理系统、快速交付类项目；React 在大型复杂应用、跨端生态、组件库生态方面也很常见。

面试总结

可以这样回答：

Vue 更像是一个渐进式框架，官方生态完整，上手快，适合快速开发管理后台和业务系统。React 更像是一个 UI 库，核心更轻，强调 JavaScript 表达能力和函数式思想，生态更自由。两者本质上都在解决组件化、状态驱动视图和高效 DOM 更新问题，只是 Vue 更偏模板和响应式依赖收集，React 更偏 JSX 和状态驱动重新渲染。

问题 18：前端如何做权限控制？

回答思路

前端权限控制通常分为路由权限、菜单权限和按钮权限。

实现方式

1. 登录后获取用户权限列表。
2. 根据权限动态生成路由和菜单。
3. 页面按钮根据权限码控制显示。
4. 请求接口时携带 Token。

注意点

前端权限只能改善用户体验，真正的权限校验必须放在后端。

问题 19：前端如何封装 Axios？

回答思路

Axios 封装主要是统一处理请求地址、超时时间、Token、错误提示和登录失效。

常见封装点

• 设置 baseURL。
• 设置请求超时时间。
• 请求拦截器中统一添加 Token。
• 响应拦截器中统一处理业务错误码。
• 登录过期时跳转登录页。
• 统一处理 loading 和错误提示。

问题 20：前端跨域是怎么回事？如何解决？

回答思路

跨域是浏览器同源策略导致的问题，当协议、域名、端口任意一个不同，就属于跨域。

解决方式

• 后端配置 CORS。
• 开发环境使用 Vite 或 Webpack 代理。
• Nginx 反向代理。
• JSONP 只适合 GET 请求，实际项目中较少使用。

问题 21：前端性能优化有哪些手段？

回答思路

前端性能优化可以从加载速度、渲染性能、网络请求和代码体积几个方向回答。

常见方案

• 路由懒加载。
• 组件按需加载。
• 图片压缩和懒加载。
• 使用 CDN。
• 开启 gzip 或 brotli 压缩。
• 减少重复请求。
• 使用缓存。
• 长列表使用虚拟列表。
• 避免不必要的组件重复渲染。

问题 22：什么是虚拟 DOM？

回答思路

虚拟 DOM 是用 JavaScript 对象描述真实 DOM 结构的一种方式。

作用

• 减少直接操作真实 DOM 的复杂度。
• 通过 Diff 算法找出最小更新范围。
• 提高跨平台能力，例如服务端渲染、小程序渲染等。

问题 23：Webpack 和 Vite 有什么区别？

回答思路

Webpack 是传统打包工具，Vite 是基于原生 ES Module 的新一代前端构建工具。

关键点

• Vite 开发环境启动更快。
• Vite 利用浏览器原生 ESM，按需编译。
• Webpack 生态成熟，复杂项目配置能力强。
• 生产环境 Vite 通常使用 Rollup 打包。

问题 24：前端如何处理登录状态？

回答思路

前端登录状态通常通过 Token 或 Session 维护。

常见流程

1. 用户登录成功后，后端返回 Token。
2. 前端保存 Token。
3. 请求拦截器自动携带 Token。
4. 后端校验 Token。
5. Token 过期后跳转登录页或刷新 Token。

注意点

Token 存储在 localStorage 使用方便，但要注意 XSS 风险；存储在 Cookie 中要注意 CSRF 防护。

问题 25：前端如何做文件上传？

回答思路

普通文件上传可以使用 FormData，大文件可以使用分片上传。

常见方案

• 小文件：FormData + multipart/form-data
• 大文件：切片、计算文件标识、分片上传、合并分片
• 断点续传：服务端记录已上传分片
• 秒传：根据文件 hash 判断文件是否已存在

问题 26：前端如何防止 XSS？

回答思路

XSS 是攻击者向页面注入恶意脚本，导致用户信息泄露或执行非法操作。

防护方式

• 不信任用户输入。
• 对输出内容进行转义。
• 避免直接使用 innerHTML。
• 富文本内容使用白名单过滤。
• 设置 CSP 安全策略。

问题 27：前端如何防止 CSRF？

回答思路

CSRF 是攻击者诱导用户在已登录状态下向目标网站发起请求。

防护方式

• 使用 CSRF Token。
• 校验 Referer 或 Origin。
• Cookie 设置 SameSite。
• 关键操作增加二次确认。

问题 28：全栈开发中前后端如何协作？

回答思路

全栈开发要重点关注接口契约、数据格式、错误码和联调效率。

常见做法

• 使用接口文档明确请求参数和响应结构。
• 前端根据接口文档先 Mock 数据。
• 后端统一返回结构，例如 code、message、data。
• 前端统一封装请求和错误处理。
• 对登录、权限、分页、文件上传等通用能力形成规范。

问题 29：管理后台类项目通常如何设计前端架构？

回答思路

管理后台重点是路由、菜单、权限、表格、表单和接口封装。

常见模块

• 登录和用户信息模块。
• 动态路由和菜单模块。
• 权限指令或权限组件。
• Axios 请求封装。
• 表格分页组件。
• 表单校验组件。
• 字典、枚举、全局配置。
• 统一错误处理和异常页面。

问题 30：你作为全栈开发，前端能力如何体现？

回答思路

可以从独立交付、框架理解、工程化、联调能力和问题排查几个方面回答。

示例回答

我在项目中不仅能完成后端接口开发，也能基于 Vue 或 React 独立完成页面开发，包括路由配置、状态管理、表单校验、接口联调、权限控制和打包部署。对于常见的前端问题，例如跨域、Token 失效、接口错误统一处理、页面性能优化、组件复用等，我都能结合业务场景独立解决。作为全栈开发，我更关注前后端整体链路，能够从数据库、接口、页面渲染和用户体验几个维度一起优化系统。

三、面试回答建议

1. 不要只背概念

回答前端问题时，最好结合项目经验，例如“我在管理后台中用 Vue Router 做动态路由，用 Pinia 存用户信息，用 Axios 拦截器统一处理 Token”。

2. Vue 和 React 至少精通一个

全栈开发不一定要 Vue 和 React 都非常深入，但至少要对一个框架能独立开发项目，对另一个框架能说明核心思想和基本用法。

3. 强调前后端整体理解

全栈岗位更看重端到端交付能力，可以多强调接口设计、联调效率、权限控制、错误处理、性能优化和部署经验。