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

一时失言乱红尘 2022-09-05 15:53 206阅读 0赞

### Vue 框架 ###

Vue 是一套用于构建用户界面的渐进式框架，与其他大型框架相比，Vue 被设计为可以自底向上逐层应用。相比起其他框架 Vue 更加灵活，开发者既可以选择使用 Vue 来开发一个全新项目，将 Vue 引入到一个现有的项目中。

Vue 的数据驱动是通过 MVVM(Model-View-ViewModel) 模式来实现，Vue 工作原理：

![90cee52cc8eb3fe3c7f7121174338d63.png][]

MVVM 包含3个部分分别是 Model、View 和 ViewModel。

*  Model 指的是数据部分，主要负责业务数据；
 *  View 指的是视图部分，即 DOM 元素，负责视图的处理；
 *  ViewModel 是连接视图与数据的数据模型，负责监听 Model 或者 View 的修改。

> ##### Vue特性： #####

*  **轻量级**  
    Angular 的学习成本高，使用起来比较复杂，而 Vue 相对简单、直接，所以 Vue 使用起来更加友好。
 *  **数据绑定**  
    Vue 是一个 MVVM 框架，数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化，这也算是 Vue 的精髓之处。尤其是在进行表单处理时，Vue 的双向数据绑定非常方便。
 *  **指令**  
    指令主要包括内置指令和自定义指令，以 “v-” 开头，作用于 HTML 元素。指令提供了一些特殊的特性，将指令绑定在元素上时，指令会给绑定的元素添加一些特殊的行为。例如，v-bind 动态绑定指令、v-if 条件渲染指令、v-for 列表渲染指令等。
 *  **插件**  
    插件用于对 Vue 框架功能进行扩展，通过 MyPlugin.install 完成插件的编写，简单配置后就可以全局使用。常用的扩展插件有 vue-router、Vuex等。

> ##### Vue 面试题 #####

**① Vue 基础知识点**

*  Vue特性
 *  Vue项目结构介绍
 *  Vue 常用指令
 *  Vue常用的修饰符
 *  条件渲染
 *  **…**

**② Vue 核心知识点**

*  对于Vue是一套渐进式框架的理解
 *  vue.js的两个核心是什么？
 *  请问 v-if 和 v-show 有什么区别
 *  v-for 与 v-if 的优先级
 *  v-on可以监听多个方法吗？
 *  **…**  
    ![a3d8144dfad4d503a5c99d3fd42b5650.png][]

**③ Vue-cli 工程**

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

**④ Vue-router**

*  vue-router 如何响应 路由参数 的变化？
 *  完整的 vue-router 导航解析流程
 *  vue-router 有哪几种导航钩子（ 导航守卫 ）？
 *  vue-router 传递参数的几种方式
 *  怎么定义 vue-router 的动态路由? 怎么获取传过来的值
 *  **…**  
    ![83c0853172834e67742f28971939b6f9.png][]

**⑤ Vuex**

*  什么是 vuex？
 *  Vuex 解决了什么问题？
 *  使用 vuex 的核心概念
 *  vuex 在 vue-cli 中的使用
 *  在 vue 中使用 vuex，修改 state 的值
 *  **…**  
    ![354e1e89d5aa61f01da7a9b8f1a65125.png][]

--------------------

### React 框架 ###

React 主要用于构建 UI。你可以在 React 里传递多种类型的参数，如声明代码，帮助你渲染出 UI、也可以是静态的 HTML DOM 元素、也可以传递动态变量、甚至是可交互的应用组件。

> **React 核心技术 —— 虚拟DOM（Virtual DOM）**

在前端开发的过程中，我们经常会做的一件事就是将变化的数据实时更新到 UI 上，这时就需要对 DOM 进行更新和重新渲染，而频繁的 DOM 操作通常是性能瓶颈产生的原因之一。

有时候我们会遇到这样一种尴尬的情况：比如有一个列表数据，当用户执行刷新操作时，Ajax 会重新从后台请求数据，即使新请求的数据和上次完全相同，DOM 也会被全部更新一遍并进行重新渲染，这样就产生了不必要的性能开销。

**React 为此引入了虚拟 DOM（Virtual DOM）机制**：对于每一个组件，React 会在内存中构建一个相对应的 DOM 树，基于 React 开发时所有的 DOM 构造都是通过虚拟 DOM 进行，每当组件的状态发生变化时，React 都会重新构建整个 DOM 数据，然后将当前的整个 DOM 树和上一次的 DOM 树进行对比，得出 DOM 结构变化的部分(Patchs)，然后将这些 Patchs 再更新到真实 DOM 中。整个过程都是在内存中进行，因此是非常高效的。

借用一张图可以清晰的表示虚拟DOM的工作机制：

![78cdd6c2939b0d9a4d411987c465222c.png][]

> ##### React 优点： #####

*  **React速度很快**  
    与其它框架相比，React 采取了一种特立独行的操作 DOM 的方式。它并不直接对 DOM 进行操作。它引入了一个叫做虚拟 DOM 的概念，安插在JavaScript 逻辑和实际的 DOM 之间。这一概念提高了 Web 性能。在UI渲染过程中，React 通过在虚拟 DOM 中的微操作来实对现实际 DOM 的局部更新。
 *  **跨浏览器兼容**  
    虚拟 DOM 帮助我们解决了跨浏览器问题，它为我们提供了标准化的 API，甚至在 IE8 中都是没问题的。
 *  **模块化**  
    为程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。每个组件都可以进行独立的开发和测试，并且它们可以引入其它组件。这等同于提高了代码的可维护性。
 *  **单向数据流**  
    Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构，它随着 React 视图库的开发而被 Facebook 概念化。它只是一个概念，而非特定工具的实现。它可以被其它框架吸纳。

> ##### React 面试题 #####

**① 基本知识**

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

**② React 组件**

*  你理解“在 React 中，一切都是组件”这句话
 *  解释 React 中 render() 的目的
 *  如何将两个或多个组件嵌入到一个组件中？
 *  state 和 props 有什么区别？
 *  React 中的状态是什么？它是如何使用的？
 *  区分状态和 props
 *  如何更新组件的状态？
 *  为什么不直接更新 state 状态？
 *  React context 是什么？
 *  **…**  
    ![eeafeec5da147cda3f55330ccf38a4c2.png][]

**③ React Redux**

*  MVC 框架的主要问题是什么？
 *  解释一下 Flux
 *  什么是 Redux？
 *  Redux 遵循的三个原则是什么？
 *  你对“单一事实来源”有什么理解？
 *  列出 Redux 的组件
 *  数据如何通过 Redux 流动？
 *  如何在 Redux 中定义 Action？
 *  解释 Reducer 的作用
 *  Store 在 Redux 中的意义是什么？
 *  **…**

**④ React 路由**

*  什么是 React 路由？
 *  为什么 React Router v4 中使用 switch 关键字？
 *  为什么需要 React 中的路由？
 *  列出 React Router 的优点
 *  React Router 与常规路由有何不同？
 *  **…**  
    ![8874b99f116b0cc03003ada60f7e3f94.png][]  
    **前端框架（Vue，React）面试题总结 PDF 文档（含答案解析）：【[点击可免费领取！][Link 1]】**

[90cee52cc8eb3fe3c7f7121174338d63.png]: /images/20220829/6127b73102844de4b1270a2da4c8455b.png
[a3d8144dfad4d503a5c99d3fd42b5650.png]: /images/20220829/83dfdfdc745c43e497086a43a8ee163e.png
[83c0853172834e67742f28971939b6f9.png]: /images/20220829/e748a49c696441849e23d954b5533ddb.png
[354e1e89d5aa61f01da7a9b8f1a65125.png]: /images/20220829/3a8d53faf2c74bb7b7cb093eacbc6dd1.png
[78cdd6c2939b0d9a4d411987c465222c.png]: /images/20220829/f5d832e0ec60436799540251720e4278.png
[eeafeec5da147cda3f55330ccf38a4c2.png]: /images/20220829/1cc90ba6af2941dfa94d4fb1f5358c91.png
[8874b99f116b0cc03003ada60f7e3f94.png]: /images/20220829/b1444ef0d7a7489a917e3fb173b1fbfd.png
[Link 1]: https://jq.qq.com/?_wv=1027&k=HnUCPlgx