前端项目vue和react选型对比
对于在做项目时候，V
ue和React两个JavaScript框架
不知道如何去选择，今天咱们从技术和实际的开发当中去对比一下这两个框架，我们在公司做项目时候如何去选择。
V
ue和react都是当下最受欢迎的两个框架，在这两个框架出来之前，jQuery才是前端No
.1
，可以说是有前端的地方必然会有jQuery，打一个简单的比方：一个开发说自己只会javaScript，而没用过jQuery
,
就像一个钓鱼的人，只用自己自制的鱼竿，而没用过市场上高级鱼竿一样。后来最早出现的框架其实是2
0
0
9
年的
angular
，当时也风靡一时，再后来到了1
3
年国内尤大开发出来
V
ue框架和国内开始引入外国faceback写的react的框架。这段时间应该被称作“三足鼎立”时期，后来一段时期，可能由于angular的语法和社区不如咱们今天说的这两个框架活跃导致，angular没落了。咱们还是言归正传说下
V
ue框架和react的框架如何去选型吧。
V
ue和react作为开发中最受欢迎的两个框架，也有许多相似之处，他们都是模块化开发和虚拟dom的引入等一些方面，也有很多不同，例如：它们数据流不同。
V
ue和react最大的差别在于两者之间的模版编写。
V
ue鼓励开发人员，使用近似常规的html的模版，也就是在使用vue过程中，更像是在写原生的html，js和css。
使用
的风格
相似于Angular风格的方法去输出动态的内容。因此，通过把原有的模板整合成新的Vue模板，Vue很容易提供旧的应用的升级。这也让新来者很容易适应它的语法。
而
另一方面
的
，
r
eact推荐
开发人员使用
的模板通用
j
avaScript的语法扩展——JSX书写。
而且react也使用了语法糖，来更加快速和美观的开发，让代码看上去更加的优雅。我自己第一次遇见语法糖这个词专门去了解了一下这个东西，最后得出来的结论就是在开发的过程中，你可以使用它，也可以不用它，只是使用它会让你开放更美观快速。说到这里，咱们就得出来这样的一个结论，如果这两个框架都不是特别熟悉情况下，使用vue框架要比react框架更加的方便，因为vue本身的写法就是写原生的html和js不用，你可以快速的上手。不像react那那种JSX模块开发那么看着面生。
V
ue和react之间的虚拟dom也是有所不同，说不同先说下什么是虚拟dom，我们在开发写的html各种div，p等标签都是真实的dom，我们写好一个页面，不可能不去改变它一些结构，如果只是宣传展示另当别论了啊。写完一个项目，肯定给用户一些增,删,改,查
,
的操作，这时候浏览器中的页面就会发生改变，改变的时候就会触发浏览器重绘和重排，重绘还好一点不会消耗太多性能，重排会改变页面的结构是十分消耗浏览器性能，页面重排的操作太多会十分影响页面的流畅。所以这俩框架，都引入了虚拟dom这一下方式，来优化重排的性能，虚拟dom顾名思义的就是虚拟的，他不是页面展示的元素，而是通过js生成的结构，
下面一张图是react官方的一个真实dom和虚拟dom的解释，
这种是不是看上去比较蒙，不知所以，这个是把一个节点 换到另一个节点的示意图，这种看起来不大直观，下面这俩图会让你清晰的理解真实dom和虚拟dom
上面图就是就是框架帮我们开发人员在修改页面中元素时候先做的工作，在修改真实dom结构时候，先在js中生成一个结构 这样我们在进行改变的时候，只需要先修改js的结构，然后再渲染出来，这样就大大减轻了浏览器的负担了。
有了虚拟dom这也是我们为啥
在一个Vue项目或者
r
eact项目中，写循环时，往往会加上key值。那么这个key值
用处是什么呢
？
首先，在Vue
框架
中，存在一个DOM复用机制，会尽量的回收DOM元素进行复用，而这个机制本身是高效的，但很多时候也会造成不可预知的Bug，而在加了key值后，元素就有了一个标识，复用机制不会复用带key值的元素。而
r
eact也存在类似的机制。
如果
使用相同的key值，可以使组件复用，也有可能导致渲染内容缺失。因此，key值一般来说，最好是独一无二的。除此之外，虚拟DOM在使用Diff算法进行对比时，若存在key值，可以更高效更迅速
查找到我们要修改的地方，可以减少不必要的性能消耗从而加快页面渲染，这就好比在一群人找人，有了一人名字直接喊出来，比你一个个的自己去辨认要块很多。
V
ue会跟踪每一个组件的依赖关系
来进行更新
,不需要重新渲染整个组件树。
1. 在react中，当状态发生改变时，组件树就会自顶向下的全diff, 重新render页面， 重新生成新的虚拟dom tree, 新旧dom tree进行比较， 进行patch打补丁方式，局部跟新dom. 所以react为了避免父组件跟新而引起不必要的子组件更新， 可以在shouldComponentUpdate做逻辑判断，减少没必要的render， 以及重新生成虚拟dom，做差量对比过程.
2. 在
V
ue中， 通过Object.defineProperty 把这些 data 属性 全部转为 getter/setter。同时watcher实例对象会在组件渲染时，将属性记录为dep, 当dep 项中的 setter被调用时，通知watch重新计算，使得关联组件更新。
(这里面要说明一点
Object.defineProperty
这个是vue
2.0
的更新渲染策略，在vue
3.0
已经做了更新，使用了 proxy来代替了原有的
Object.defineProperty
了)。
react：react使用虚拟DOM，量级轻，而且并不局限于特定浏览器，从而消除了性能低下的问题。这也是react
的
虚拟
dom
流行的主要原因。
Vue：Vue使用虚拟DOM，但是和React相比，性能更为优越，而且没有bug。
V
ue和react更新策略的不同也就有了我们在做项目选型时候的考虑，Vue的性能更为优越，react适配性更高。我们做到项目如果要兼容很多老的浏览器版本时候就需要使用recat更为友好，如果为了更好性能而不需要适配太多浏览器可以选择
V
ue。
V
ue和react
监听数据变化的实现原理不同
和
数据流的不同
Vue 通过 getter/setter 以及一些函数的劫持，能精确知道数据变化，不需要特别的优化就能达到很好的性能
React 默认是通过比较引用的方式进行的，如果不优化（PureComponent/shouldComponentUpdate）
就
可能
会
导致大量不必要的
虚拟dom
的重新渲染
Vue中默认是支持双向绑定的。在Vu
e
1.
0
中我们可以实现两种双向绑定：
组件与DOM之间可以通过 v-model 双向绑定
在 Vue2.x 中去掉了第一种，也就是父子组件之间不能双向绑定了（但是提供了一个语法糖自动帮你通过事件的方式修改），
由于
Vue2
和Vue
3 已经不鼓励组件对自己的 props 进行任何修改了。
所以现在我们只有组件
和dom结构
之间的双向绑定这一种。
然而 React 从诞生之初就不支持双向绑定，React一直提倡的是单向数据流，他称之为 onChange/setState()模式。
上述说的这些是vue和react设计模式上就如此，但是由
于我们
在实际的开发过程中
一般都会用 Vuex 以及 Redux 等单向数据流的状态管理框架，因此很多时候我们感受不到这一点的区别了
由于re
act强调数据的不可变
，并且
react提倡的更细粒度的封装，带来的组件的复用性提高
。
Vue
的数据流
更加简单
而且能够双向绑定，组件的复用性不如react轻便
，
所以在构建项目中，我们一般中小型项目更加倾向于使用vue，
而
在
构建大型
项目的
时候
使用react
更
好。
1.
html
模板和渲染函数的弹性选择
，能够更加容易上手，适用于新手初次开发项目
；
1.
倾向于手动优化，
更适合超大型项目，
并有很
好的可测试性；
2.
更好的适配性，虚拟dom良好兼容性，适用于兼容性良好的项目
作者简介：王文磊，21 年 9 月加入易车，前端开发，关注JavaScript原生、node、微服务、web前端开发。
标签:
