前端面试核心问题整理
一、核心问答
**问：**项目中做过哪些性能优化？效果如何？
**答：**主要从代码、构建、运行时三个维度入手。代码层面：用 Tree Shaking 剔除无用代码，封装通用组件减少冗余；构建层面：配置 Vite 的 chunkSplit 策略拆分打包体积，给第三方库做 CDN 引入；运行时层面：实现图片懒加载 + 预加载、路由懒加载，还做了首屏骨架屏优化。最终项目首屏加载时间从 2.8s 降到 1.2s，LCP 指标提升 60%。
**问：**怎么理解 Vue3 的响应式原理？和 Vue2 有什么区别？
**答：**Vue3 是基于 Proxy 实现响应式，而 Vue2 用的是 Object.defineProperty。两者核心区别有两点：一是 Proxy 能直接监听对象和数组的变化，不用像 Vue2 那样重写数组方法、做额外的 hack 处理；二是 Proxy 支持监听新增属性，不需要手动调用 $set。相关实现逻辑可参考《Vue.js 设计与实现》及开源仓库中的简易版响应式系统。
**问：**跨域问题怎么解决？实际项目中你用的哪种？
**答：**常见方案有 CORS、JSONP、反向代理这几种。JSONP 只支持 GET 请求，局限性比较大；CORS 需要后端配置响应头，适合前后端分离的场景。实际项目中常用反向代理，开发环境下配置 Vite 的 proxy 代理转发请求，生产环境则让运维在 Nginx 上配置反向代理，这样既能解决跨域，又能避免暴露真实的后端接口地址，更安全。
**问：**你觉得前端开发中最重要的能力是什么？
**答：**我觉得是问题排查能力 + 工程化思维。排查能力能让你遇到 bug 不慌，比如用 Chrome DevTools 定位网络问题、用 Vue Devtools 调试组件状态；工程化思维则能保证团队协作效率，比如制定代码规范、搭建自动化构建流程、做好文档管理。在开源项目中，完善 ESLint 规则和提交规范，可以减少很多代码冲突和低级 bug。
**问：**如果和后端同事对接口产生分歧，你会怎么处理？
**答：**首先我会先看接口文档，确认分歧点是文档没明确，还是理解有偏差。如果是文档问题，会主动拉上后端同学一起梳理需求场景，明确接口的入参、出参和异常处理逻辑，更新文档；如果是技术实现上的分歧，比如字段命名、数据格式，会从前端渲染和用户体验的角度给出合理建议，同时也会考虑后端的实现成本，最终找一个双方都能接受的方案，毕竟协作的核心是把项目做好。
二、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 算法
- vue3.0 有了解过吗，你觉得 vue3.0 好吗，好在哪
- VUE 组件如何与 iframe 通信问题
三、React 面试题
- 说说 React 中 onClick 绑定后的工作原理
- 说说 react 里面 bind 与箭头函数
- 说说 react 中的性能优化
- 高阶组件和高阶函数是什么
- setState 和 replaceState 的区别
- redux 中核心组件有哪些，reducer 的作用
- 什么是受控组件
- hooks+context 和 redux 你是怎么选择的，都在什么场景下使用
- useeffect 模拟生命周期
- setsate 更新之后和 usestate 的区别
- react 父组件 props 变化的时候子组件怎么监听
- usememo 在 react 中怎么使用
- React Hooks 各种函数介绍
- React Component 和 Purecomponent 区别
- hooks 相对于 class 的优化
- hooks 父组件怎么调用子组件的方法
- 讲一下 react 中的通信
