前端框架(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)介绍及面试题总结的主要内容,如果未能解决你的问题,请参考以下文章