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

Posted 2021-09-07 QIANDXX

Vue 框架

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

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

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可以监听多个方法吗？
• …
  

③ 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 的动态路由? 怎么获取传过来的值
• …
  

⑤ Vuex

• 什么是 vuex？
• Vuex 解决了什么问题？
• 使用 vuex 的核心概念
• vuex 在 vue-cli 中的使用
• 在 vue 中使用 vuex，修改 state 的值
• …
  

---

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的工作机制：

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 是什么？
• …
  

③ React Redux

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

④ React 路由

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