面试题之Vue和React的区别是什么?

一提到前端框架,相信大家都对Vue和React不陌生,这两个前端框架都是比较主流的,用户也都比较多,但是我们在使用这些框架的时候,是否对这两个框架之间的区别有所了解呢?接下来,让我们来一起的系统梳理这两个框架的区别是什么吧~

预备知识介绍

在了解Vue和React的区别之前,我们首先来了解一下MVC和MVVM架构,这个知识点有助于我们对后续知识的了解。

MVC架构

首先MVC指的是Model-View-Controller,分别代表着模型层、视图层、控制器。

Model(模型层),主要管理的是业务模型的数据和处理数据的逻辑。

View(视图层)主要是接收用户的交互请求并展示数据信息给用户。

Controller(控制器层)主要担任的是Model和View之间的桥梁,用于控制程序的流程。Controller负责确保View可以访问到需要显示的Model对象的数据,View接收到用户的交互请求之后,会将请求转发给控制器,控制器解析请求之后,会交给对应的Model处理。

MVVM架构

MVVM架构指的是Model-View-ViewModel,我们可以看到MVVM架构和MVC架构的区别在于有一个ViewModel部分,首先我们要知道在已经有了MVC架构的时候,为什么还要衍生出MVVM架构,这是因为View中很多控件的数据类型和Model中的属性不相同,例如Model中的时间数据可能是一串数字,View想要展示成日期的格式,这就需要一种转化,这个转换如果放在View不合适,因为View中不应该出现逻辑代码,放在Model中也不合适,这回导致Model臃肿庞大,因为这种问题的存在诞生了ViewModel,这一层可以帮助View转化为相应的数据给Model或者从Model中转化成View可以显示的内容。

Vue和React的区别是什么?

一、核心思想不同

Vue的核心思想是尽可能的降低前端开发的门槛,是一个灵活易用的渐进式双向绑定的MVVM框架。

React的核心思想是声明式渲染和组件化、单向数据流,React既不属于MVC也不属于MVVM架构。

  • RQ1:声明式是什么意思?

声明式与之相对应的是命令式,命令式指的是通过DOM操作一步步把网页变成想要的样子,而声明式则是只需要通过状态去形容最后的网页长什么样子即可。

  • RQ2:组件化是什么意思?

组件化指的是尽可能的将页面拆分成一个个较小的、可以复用的组件,这样让我们的代码更加方便组织和管理,并且拓展性页更强。

  • RQ3:如何理解React的单向数据流?

React的单向数据流指的是数据主要从父节点通过props传递到子节点,如果顶层某个props改变了,React会重新渲染所有的子节点,但是单向数据流并非单向绑定,React想要从一个组件去更新另一个组件的状态,需要进行状态提升,即将状态提升到他们最近的祖先组件中,触发父组件的状态变更,从而影响另一个组件的显示。单向数据流的好处是能够保证状态改变的可追溯性,假如,父组件维护了一个状态,子组件如果能够随意更改父组件的状态,那么各组件的状态改变就会变得难以追溯。

二、组件写法上不同

Vue的组件写法是通过template的单文件组件格式。

React的组件写法是JSX+inline style,也就是吧HTML和CSS全部写进JavaScript中。

三、Diff算法不同

Diff算法前置知识:虚拟DOM

在了解Diff算法之前,我们首先要知道什么是虚拟DOM,虚拟DOM是一个用来描述真实DOM的对象,本质是对象。

什么是Diff算法?

Diff算法是一种对比算法,主要是对比旧的虚拟DOM和新的虚拟DOM,找出发生更改的节点,并只更新这些接地那,而不更新未发生变化的节点,从而准确的更新DOM,减少操作真实DOM的次数,提高性能。

Diff算法是深度优先还是广度优先?时间复杂度是多少?

Diff算法是深度优先算法,时间复杂度是O(n)。

Vue的Diff算法

下面是Vue的diff算法的主要流程:

 

  1. 当数据发生变化的时候,会触发setter,然后通过Dep类的notify方法去通知所有的订阅者Watcher,订阅者会调用patch方法。
  2. patch方法会通过sameVnode方法来判断当前同层的虚拟节点是否是同一种类型的节点,如果是则调用patchVnode方法,不是则直接替换成新的节点。
  3. 如果是同一类型的节点,patchVnode会首先找到节点对应的真实DOM,然后判断新旧节点是否是指向的同一个对象,如果是则直接return。如果不是则判断文本节点是否相等,不相等则将真实DOM的文本节点改为新节点的文本内容,然后看旧节点和新节点的子节点的关系,如果旧的有新的没有,则删除真实DOM的子节点,如果信有旧没有,则将虚拟节点真实化之后,添加上去,如果二者都有子节点则执行updateChildren函数比较子节点。
  4. updateChildren方法的核心对比思路就是通过首尾指针的方法进行对比。
  • RQ:为什么不建议使用index作为节点的key?

假如我们在一组节点的首部添加了一个新节点,使用index作为key,diff算法通过key判断是相同类型的节点之后,会进行进一步的比较,把其内容进行更改,这样就会造成这一组的节点都被更新了,最后一个节点还被当做新节点创建了,这样会造成很大的性能浪费,因此不建议使用index作为key。

React的diff和Vue的diff算法的不同之处

vue和react的diff算法都是进行同层次的比较,主要有以下两点不同:

  1. vue对比节点,如果节点元素类型相同,但是className不同,认为是不同类型的元素,会进行删除重建,但是react则会认为是同类型的节点,只会修改节点属性。
  2. vue的列表比对采用的是首尾指针法,而react采用的是从左到右依次比对的方式,当一个集合只是把最后一个节点移动到了第一个,react会把前面的节点依次移动,而vue只会把最后一个节点移动到最后一个,从这点上来说vue的对比方式更加高效。

四、响应式原理不同

React的响应式原理

React主要是通过setState()方法来更新状态,状态更新之后,组件也会重新渲染。

Vue的响应式原理

vue会遍历data数据对象,使用Object.definedProperty()将每个属性都转换为getter和setter,每个Vue组件实例都有一个对应的watcher实例,在组件初次渲染的时候会记录组件用到了那些数据,当数据发生改变的时候,会触发setter方法,并通知所有依赖这个数据的watcher实例调用update方法去触发组件的compile渲染方法,进行渲染数据。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/120644.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vscode下ssh免密登录linux服务器

vscode使用ssh免密登录linux 1、安装SSH插件2、生成密钥3、linux安装ssh服务4、linux下配置公钥5、vscode远程登录 注:测试环境为window10Ubuntu1804/Ubuntu2204 1、安装SSH插件 扩展->搜索SSH->点击install进行安装,如下图所示: 2、…

Docker 容器服务的注册、发现及Docker安全

目录 Docker容器服务的注册和发现 1、什么是服务注册与发现? 2、什么是consul consul的部署 1、环境准备 2、部署consul服务器 1)建立 Consul 服务 2)设置代理,在后台启动 consul 服务端 3)查看集群信息 4&a…

Linux C语言开发-D7D8运算符

算术运算符&#xff1a;-*/%&#xff0c;浮点数可以参与除法运算&#xff0c;但不能参与取余运算 a%b&#xff1a;表示取模或取余 关系运算符&#xff1a;<,>,>,<,,! 逻辑运算符:!,&&,|| &&,||逻辑运算符是从左到右&#xff0c;依次运算&#…

OpenCV学习(三)——响应鼠标事件(获取点击点坐标和颜色,利用鼠标进行绘图)

响应鼠标事件 3. 响应鼠标事件3.1 获取鼠标点击的坐标3.2 获取鼠标点击像素点的颜色3.3 在鼠标点击的位置生成圆3.4 通过拖动鼠标来绘制填充矩形3.5 通过拖动鼠标绘制未填充矩形3.6 使用鼠标选点绘制多边形3.7 按住鼠标左键进行绘图 3. 响应鼠标事件 使用OpenCV读取图像&#…

Virtual DOM

目录 Virtual DOM 前言 用法 代码 理解 Virtual DOM的工作原理&#xff1a; 为什么使用Virtual DOM? 哪些库/框架使用Virtual DOM? 总结 Virtual DOM&#xff08;虚拟DOM&#xff09;是一种编程概念&#xff0c;它是对真实DOM的轻量级抽象表示。在前端开发中&#x…

CompletableFuture 实战

在本文章中通过一个案例来演示一下CompletableFuture的使用。 以一个商品查询为例&#xff0c;在微服务架构中&#xff0c;一个商品信息查询会涉及商品基本信息查询、商品评论查询、商品库存查询&#xff0c;每个查询都涉及不同的微服务的调用&#xff0c;如果使用异步…

基于机器视觉的车道线检测 计算机竞赛

文章目录 1 前言2 先上成果3 车道线4 问题抽象(建立模型)5 帧掩码(Frame Mask)6 车道检测的图像预处理7 图像阈值化8 霍夫线变换9 实现车道检测9.1 帧掩码创建9.2 图像预处理9.2.1 图像阈值化9.2.2 霍夫线变换 最后 1 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分…

Linux两条服务器实现相互免密登录

1.准备两台虚拟机&#xff0c;一台充当服务器端&#xff08;server&#xff09;&#xff0c;一台充当客户端&#xff08;client&#xff09; 服务器端&#xff08;server&#xff09;&#xff1a;192.168.75.139 客户端&#xff08;client&#xff09;&#xff1a;192.168.75…

redis学习(三)——java整合redis

Jedis Jedis可以用于java连接redis数据库 新建一个maven项目&#xff0c;导入Jedis依赖 <dependency><groupId>org.junit.jupiter</groupId><artifactId>junit-jupiter</artifactId><version>RELEASE</version><scope>test…

Linux 云服务器磁盘挂载简介

云服务器磁盘挂载 一、挂载须知 一般涉及工具或命令&#xff1a;fdisk/gdisk/parted等挂载&#xff08;mounting&#xff09;是指由操作系统使一个存储设备&#xff08;诸如硬盘、CD-ROM或共享资源共享资源上的计算机文件和目录可供用户通过计算机的文件系统访问的一个过程。…

H5营销观察:H5破圈传播有什么秘诀

在移动互联网时代&#xff0c;流量越加碎片化&#xff0c;场景变得相对短促和兴趣导向&#xff0c;一个营销H5产生的每一次点击、每一次互动、每一次流量停留背后都会有相应的动机&#xff0c;也是营销流量效果的成因。 今天&#xff0c;我们一起来探究下什么样的内容更容易传播…

使用 curl 发送 POST 请求的几种方式

HTTP 的 POST 请求通常是用于提交数据&#xff0c;可以通过这篇文章来了解各种提交方式&#xff1a;四种常见的 POST 提交数据方式。做 Web 后端开发时&#xff0c;不可避免地要自己给自己发请求来调试接口&#xff0c;这里要记录的内容是如何使用命令行工具 curl 来进行各种方…

视频相关学习笔记

YUV 和rgb一样是一种表示色彩的格式&#xff0c;Y表示亮度&#xff0c;UV表示色度&#xff08;U是蓝色投影&#xff0c;V是红色投影&#xff09;&#xff0c;只有Y就是黑白的&#xff0c;所以这个格式的视频图片可以兼容黑白电视&#xff0c;所以彩色电视使用的都是YUV 存储方…

使用 DDPO 在 TRL 中微调 Stable Diffusion 模型

引言 扩散模型 (如 DALL-E 2、Stable Diffusion) 是一类文生图模型&#xff0c;在生成图像 (尤其是有照片级真实感的图像) 方面取得了广泛成功。然而&#xff0c;这些模型生成的图像可能并不总是符合人类偏好或人类意图。因此出现了对齐问题&#xff0c;即如何确保模型的输出与…

深入理解强化学习——强化学习的历史:试错学习

分类目录&#xff1a;《深入理解强化学习》总目录 让我们现在回到另一条通向现代强化学习领域的主线上&#xff0c;它的核心则是试错学习思想。我们在这里只对要点做概述&#xff0c;《深入理解强化学习》系列后面的文章会更详细地讨论这个主题。根据美国心理学家R.S.woodworth…

卡尔曼滤波(Kalman Filter)原理及Python实现

Kalman-Filter-Example 项目地址 https://github.com/zhengjie9510/kalman-filter-example 理论公式 详细理论可参考DR_CAN关于卡尔曼滤波器的视频讲解。https://www.bilibili.com/video/BV1dV411B7ME 卡尔曼滤波公式分为预测和更新两部分。 预测公式为&#xff1a; x_hat…

CVE-2022-32991靶场复现

靶场环境&#xff1a; 题目提示了该CMS的welcome.php中存在SQL注入攻击。 CVE官方给出的提示&#xff1a; welcome.php页面存在SQL注入&#xff0c;并且这个参数是eid 打开靶场环境&#xff1a; 页面是一个登陆注册的界面 用户注册&#xff1a; 1 010.com 123456 123456 点击Re…

国家数据局正式揭牌,数据专业融合型人才迎来发展良机

文章目录 每日一句正能量摘要《数据要素安全流通》《Python数据挖掘&#xff1a;入门、进阶与实用案例分析》《数据保护&#xff1a;工作负载的可恢复性 》《Data Mesh权威指南》《分布式统一大数据虚拟文件系统 Alluxio原理、技术与实践》《云原生数据中台&#xff1a;架构、方…

论文阅读(一)城市干道分段绿波协调控制模型研究

[1]酆磊,赵欣,李林等.城市干道分段绿波协调控制模型研究[J].武汉理工大学学报(交通科学与工程版),2021,45(06):1034-1038. 主要内容:该文介绍了基于绿波带宽和关联度的城市干道分段绿波协调控制模型。通过将主干道划分为不同子区域,并根据路段特点进行精准化控制,实现了分段…

【数据库】聚集函数

聚集函数 聚集函数一览AVG() 函数COUNT() 函数MAX() 函数MIN() 函数SUM() 函数 组合聚集函数 聚集函数一览 我们需要汇总数据而不是实际检索&#xff0c;此时我们使用聚集函数进行处理&#xff1b; 聚集函数一览表如下&#xff1a; 函数说明AVG()返回平均值COUNT()返回数量总…