使用这些框架的时候是否对这两个框架之间的区别有所了解呢接下来让我们来一起的系统梳理这两个框架的区别是什么吧~

预备知识介绍

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

MVC架构

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

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的核心思想是尽可能的降低前端开发的门槛是一个灵活易用的渐进式双向绑定的MVVM框架。

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

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

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

React的单向数据流指的是数据主要从父节点通过props传递到子节点如果顶层某个props改变了React会重新渲染所有的子节点但是单向数据流并非单向绑定React想要从一个组件去更新另一个组件的状态需要进行状态提升即将状态提升到他们最近的祖先组件中触发父组件的状态变更从而影响另一个组件的显示。

单向数据流的好处是能够保证状态改变的可追溯性假如父组件维护了一个状态子组件如果能够随意更改父组件的状态那么各组件的状态改变就会变得难以追溯。

二、组件写法上不同

style也就是吧HTML和CSS全部写进JavaScript中。

三、Diff算法不同

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

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

当数据发生变化的时候会触发setter然后通过Dep类的notify方法去通知所有的订阅者Watcher订阅者会调用patch方法。

patch方法会通过sameVnode方法来判断当前同层的虚拟节点是否是同一种类型的节点如果是则调用patchVnode方法不是则直接替换成新的节点。

如果是同一类型的节点patchVnode会首先找到节点对应的真实DOM然后判断新旧节点是否是指向的同一个对象如果是则直接return。

如果不是则判断文本节点是否相等不相等则将真实DOM的文本节点改为新节点的文本内容然后看旧节点和新节点的子节点的关系如果旧的有新的没有则删除真实DOM的子节点如果信有旧没有则将虚拟节点真实化之后添加上去如果二者都有子节点则执行updateChildren函数比较子节点。

updateChildren方法的核心对比思路就是通过首尾指针的方法进行对比。

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

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

vue对比节点如果节点元素类型相同但是className不同认为是不同类型的元素会进行删除重建但是react则会认为是同类型的节点只会修改节点属性。

vue的列表比对采用的是首尾指针法而react采用的是从左到右依次比对的方式当一个集合只是把最后一个节点移动到了第一个react会把前面的节点依次移动而vue只会把最后一个节点移动到最后一个从这点上来说vue的对比方式更加高效。

四、响应式原理不同

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

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