当前位置:   article > 正文

前端框架(Vue,React)介绍及面试题总结_熟悉react和vue

熟悉react和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组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。每个组件都可以进行独立的开发和测试,并且它们可以引入其它组件。这等同于提高了代码的可维护性。

最后:

总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。

面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/797106
推荐阅读
相关标签
  

闽ICP备14008679号