前端框架(Vue,React)介绍及面试题总结

Posted QIANDXX

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端框架(Vue,React)介绍及面试题总结相关的知识,希望对你有一定的参考价值。

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 文档(含答案解析):【点击可免费领取!

以上是关于前端框架(Vue,React)介绍及面试题总结的主要内容,如果未能解决你的问题,请参考以下文章

前端框架(Vue,React)介绍及面试题总结

前端面试高频React题及详解,另附有React面试题集合

前端面试高频React题及详解,另附有React面试题集合

前端面试题总结

前端React面试题总结

前端React面试题总结