前端（Vue，React）框架面试题总结

梦里梦外; 2022-11-15 11:22 258阅读 0赞

![6addde64386ed8ed803d7ee8fee96354.png][]

### 前言 ###

Vue 是用于构建交互式的 Web 界面的库。Vue 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。  
React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI，React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

> #### Vue 特点： ####

*  **简洁**： HTML 模板 + JSON 数据，再创建一个 Vue 实例。
 *  **数据驱动**： 自动追踪依赖的模板表达式和计算属性。
 *  **组件化**： 用解耦、可复用的组件来构造界面。
 *  **轻量**： ~24kb min+gzip，无依赖。
 *  **快速**： 精确有效的异步批量 DOM 更新。
 *  **模块友好**： 通过 NPM 或 Bower 安装，无缝融入你的工作流。

> #### Vue 面试题总结 ####

**vue-cli工程**

*  构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？
 *  vue-cli 工程常用的 npm 命令有哪些？
 *  请说出vue-cli工程中文件夹和文件的用处
 *  config文件夹 下 index.js 的对于工程 开发环境 和 生产环境 的配置
 *  请你详细介绍一些 package.json 里面的配置

**vue核心知识点**

*  对于Vue是一套渐进式框架的理解
 *  vue.js的两个核心是什么？
 *  请问 v-if 和 v-show 有什么区别
 *  vue常用的修饰符
 *  v-on可以监听多个方法吗？
 *  vue中 key 值的作用
 *  vue-cli工程升级vue版本
 *  vue事件中如何使用event对象？
 *  $nextTick的使用
 *  Vue 组件中 data 为什么必须是函数
 *  v-for 与 v-if 的优先级
 *  vue中子组件调用父组件的方法
 *  vue中 keep-alive 组件的作用
 *  vue中如何编写可复用的组件？
 *  什么是vue生命周期？
 *  vue生命周期钩子函数有哪些？
 *  vue如何监听键盘事件中的按键？
 *  vue更新数组时触发视图更新的方法
 *  vue中对象更改检测的注意事项
 *  解决非工程化项目初始化页面闪动问题
 *  v-for产生的列表，实现active的切换
 *  v-model语法糖的组件中的使用
 *  vue中自定义过滤器
 *  vue等单页面应用及其优缺点
 *  什么是vue的计算属性？
 *  vue-cli提供的几种脚手架模板
 *  vue父组件如何向子组件中传递数据？
 *  vue弹窗后如何禁止滚动条滚动？
 *  计算属性的缓存和方法调用的区别
 *  vue-cli中自定义指令的使用  
    ![f56a5df7edb6e507b6feb61f789d10e6.png][]

**vue-router**

*  vue-router如何响应 路由参数 的变化？
 *  完整的 vue-router 导航解析流程
 *  vue-router有哪几种导航钩子（ 导航守卫 ）？
 *  vue-router传递参数的几种方式
 *  vue-router的动态路由匹配
 *  vue-router如何定义嵌套路由？
 *  组件及其属性
 *  vue-router实现路由懒加载（ 动态加载路由 ）
 *  vue-router路由的两种模式
 *  history路由模式配置及后台配置

**vuex**

*  什么是vuex？
 *  使用vuex的核心概念
 *  vuex在vue-cli中的应用
 *  在vue中使用vuex，修改state的值
 *  vuex actions异步修改状态

**http请求**

*  Promise对象是什么？
 *  axios、fetch与ajax有什么区别？
 *  什么是JS的同源策略和跨域问题？
 *  如何解决跨域问题？
 *  axios有什么特点？

**UI样式**

*  .vue组件的scoped属性的作用
 *  如何让CSS只在当前组件中起作用？
 *  vue-cli中常用的UI组件库
 *  如何适配移动端？【 经典 】
 *  移动端媒体查询
 *  vue内容垂直和水平居中
 *  vue-cli引入图片的方法
 *  移动端常见样式问题
 *  文本超出隐藏  
    ![7c31df331b075ac06f13285f8424c8e0.png][]

**常用功能**

*  vue中如何实现tab切换功能？
 *  vue中keep-alive 实现标签页组件缓存
 *  vue中实现页面从右往左侧滑入效果
 *  vue中父子组件如何相互调用方法？
 *  vue中央事件总线的使用

**MVVM设计模式**

*  MVC、MVP与MVVM模式
 *  MVC、MVP与MVVM的区别
 *  MVVM的实现原理
 *  Object.defineProperty()方法
 *  ES6中定义的类和对象
 *  JS中的文档碎片
 *  解构赋值
 *  Array.from
 *  Array.reduce
 *  递归的使用
 *  Obj.keys()与Obj.defineProperty
 *  发布-订阅模式
 *  vue项目优化，缩短首屏加载时间

**深入拓展**

*  vue开发命令 npm run dev 输入后的执行过程
 *  vue的服务器端渲染
 *  从零写一个npm安装包
 *  vue-cli中常用到的加载器
 *  webpack的特点  
    ![d64593ed81d5e963cb5245f1e047fb54.png][]  
    **篇幅有限，有需要面试资料【[点击这里][Link 1]】可以领取前端Vue，React框架面试题（含题目及答案）**

> #### React 特点： ####

*  **声明式设计**：React采用声明范式，可以轻松描述应用。
 *  **高效**：React通过对DOM的模拟，最大限度地减少与DOM的交互。
 *  **灵活**：React可以与已知的库或框架很好地配合。
 *  **JSX**：JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
 *  **组件**：通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
 *  **单向响应的数据流**：React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

> #### React面试题总结 ####

**基本知识**

*  区分Real DOM和Virtual DOM
 *  什么是React？
 *  React有什么特点？
 *  列出React的一些主要优点。
 *  React有哪些限制？
 *  什么是JSX？
 *  你了解 Virtual DOM 吗？解释一下它的工作原理。
 *  为什么浏览器无法读取JSX？
 *  与 ES5 相比，React 的 ES6 语法有何不同？
 *  React与Angular有何不同？

**React 组件**

*  你理解“在React中，一切都是组件”这句话。
 *  解释 React 中 render() 的目的。
 *  如何将两个或多个组件嵌入到一个组件中？
 *  什么是 Props?
 *  React中的状态是什么？它是如何使用的？
 *  区分状态和 props
 *  如何更新组件的状态？
 *  React 中的箭头函数是什么？怎么用？
 *  区分有状态和无状态组件。
 *  React组件生命周期的阶段是什么？
 *  详细解释 React 组件的生命周期方法。
 *  React中的事件是什么？
 *  如何在React中创建一个事件？
 *  React中的合成事件是什么？
 *  你对 React 的 refs 有什么了解？
 *  列出一些应该使用 Refs 的情况。
 *  如何模块化 React 中的代码？
 *  如何在 React 中创建表单
 *  你对受控组件和非受控组件了解多少？
 *  什么是高阶组件（HOC）？
 *  你能用HOC做什么？
 *  什么是纯组件？
 *  React 中 key 的重要性是什么？  
    ![256abb7617250bd35bff68ff86c1aa34.png][]  
    **React Redux**
 *  MVC框架的主要问题是什么？
 *  解释一下 Flux
 *  什么是Redux？
 *  Redux遵循的三个原则是什么？
 *  你对“单一事实来源”有什么理解？
 *  列出 Redux 的组件。
 *  数据如何通过 Redux 流动？
 *  如何在 Redux 中定义 Action？
 *  解释 Reducer 的作用。
 *  Store 在 Redux 中的意义是什么？
 *  Redux与Flux有何不同？
 *  Redux 有哪些优点？

**React 路由**

*  什么是React 路由？
 *  为什么React Router v4中使用 switch 关键字 ？
 *  为什么需要 React 中的路由？
 *  列出 React Router 的优点。
 *  React Router与常规路由有何不同？  
    ![4b91dc174a34ff67748704f3df1cd68e.png][]

[6addde64386ed8ed803d7ee8fee96354.png]: /images/20221022/572007b7d6f8430d8074346a86b688ec.png
[f56a5df7edb6e507b6feb61f789d10e6.png]: https://img-blog.csdnimg.cn/img_convert/f56a5df7edb6e507b6feb61f789d10e6.png
[7c31df331b075ac06f13285f8424c8e0.png]: https://img-blog.csdnimg.cn/img_convert/7c31df331b075ac06f13285f8424c8e0.png
[d64593ed81d5e963cb5245f1e047fb54.png]: https://img-blog.csdnimg.cn/img_convert/d64593ed81d5e963cb5245f1e047fb54.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=9rPKycbD
[256abb7617250bd35bff68ff86c1aa34.png]: https://img-blog.csdnimg.cn/img_convert/256abb7617250bd35bff68ff86c1aa34.png
[4b91dc174a34ff67748704f3df1cd68e.png]: https://img-blog.csdnimg.cn/img_convert/4b91dc174a34ff67748704f3df1cd68e.png