React.js or Vue.js

Posted 2021-05-01 飙猪狂

React.js or Vue.js

有人的地方，就有江湖，有江湖的地方，就会有“恩怨情仇”，IT界到处都是程序猿，IT江湖也是如此，曾几何时，关于“php是IT江湖最厉害的武功”的纷争，引起何其多江湖上的血雨腥风，然而，今天的主角不是PHP，而是React和VUE。

        近期前端业界出现新的争端，就是“React.js好还是Vue.js好？”。此处的Vue.js指的相对稳定的1.0版本，Vue.js 2.0版本还在迭代中，江湖人称版本帝，已经不具可比性了。本人对上述两门技术有所涉猎，写上这篇文章分享一下个人的看法，仅代表个人观点，请各位看官轻拍。

门派

有江湖的地方，自然就有门派。存在即合理，每个门派都有其生存之道，江湖中常称的独门秘诀。

React

        React.js出身于名门大派facebook，facebook这个门派，在江湖上算是名门大派，虽然江湖上还有少数几个走在邪魔歪道的地区，无法拜访这个门派，但这丝毫不影响它成为一个名门大派。

        React起源于Facebook 的内部项目，因为该公司对市场上所有 javascript MVC框架，都不满意，就决定自己写一套，用来架设 Instagram的网站（又一个无法拜访的门派）。后面发现React这套东西很好用，就在2013年5月开源了。

        经历了3年多，现在在江湖最大的男性交友网站github上，搜索React，搜到相关的内容有156,301条记录。

---

Vue.js

        Vue.js是由江湖上少数几个走在邪魔歪道的地区之一的前端大牛尤雨溪创建的，在学习React.js和Angular.js等技术的优缺点之后，进行了改良，集百家之所长。

        同样，在江湖最大的男性交友网站github上，搜索vue，搜到相关的内容有17,262条记录。

---

衍生派系

        facebook自身推出的大杀器ReactNative，阿里的ant-design，腾讯的react-weui都是基于React.js开发的前端框架，其中阿里的ant-design比较全面。而Vue.js目前还是较少大公司支持推广。

        江湖中常说，英雄莫问出处，但是这只是针对个人的说法，对于一个门派来说，名门大派和无名门派还是有区别的。大派，人员资源充足，功夫的积累及支持也十分充足，这也是我们常说的天下武功出少林。通过在github的数据不难看出，名门大派出身的React.js无论从关注度，贡献度，活跃程度，还是到支持度，他的生态圈比Vue.js完善得多。生态圈关系到用户在遇到问题时，解决问题的可选择性及支持程度。

（列表是为了给不想看太多文字的人看的）

比较项	React.js	Vue.js
团队	facebook	个人
github数据	156,301	17,262
后援团	ReactNative\阿里\腾讯	手淘

武功

天下武功，唯快不破。

        前端在Web页面，在很多情况下，对实体DOM的操作过频，会导致性能问题，并且在传统的技术框架上，这些操作是无法避免的。而React.js首次提出了虚拟DOM技术理念，通过内部计算虚拟DOM的差量变化，只对实体DOM进行最少的操作，极大的提升了前端页面的性能。

        Vue.js由于自身的技术特点，就是专注html端，其实质是以实体DOM的操作为主，所以，1.0版本没有引入虚拟DOM的技术，2.0引入虚拟DOM之后有种不伦不类的感觉，其实这也是揉合百家所长所容易出现的问题，就是中庸。然而，Vue.js的快体现在哪？主要是体现在上手快，新增概念相对较少，对于小型且不太复杂的页面应用，开发效率高。（当然，Vue.js另外一个表现出快的地方，在2.0版本的更新上，江湖人戏称版本帝。）

（列表是为了给不想看太多文字的人看的）

比较项	React.js	Vue.js
快	性能快	上手快
数据解耦	数据抽象，解耦	未

---

最好?

技术没有对错，只有合适与否

        每一项技术，都有其优缺点，做为一个技术人员，最好是两样都学习，学习设计的思想及实现的技巧，这才是最有价值的。就像上面所说的React出身于名门大派，概念完整，性能和生态优秀，但是它也有它的缺点。

优点	描述
概念	组件化思想完整
性能	虚拟DOM性能较优
生态圈	健壮

缺点	描述
概念	组件,state,jsx语法等新概念多
动画特性	支持不够友好，实现较为麻烦
体积	体积较大
上手难易	难

而Vue.js虽然是出身于个人，还是国内的大牛出品（大赞），虽然有很多不足，但是也有它的很多优点。

优点	描述
概念	符合传统的WEB开发
动画特性	支持度友好
体积	体积较小
上手难易	易

缺点	描述
概念	组件化思想不够彻底
性能	理论上较为落后
生态圈	不足

也许很多熟悉这两门技术的人会问，争论较多的数据处理，你怎么没提到呢？ React.js是提倡单向数据流，而Vue.js是提倡双向数据绑定的。

        单向数据流的好处是数据的流动是可以自己控制和管理的，坏处是需要做多一些事来处理数据回流的情况，举个例子，当设计一个组件时，通过修改状态，可以单向的同步到组件的视图表现层中，如果用户有输入，默认情况下这些输入是不会自动同步修改到组件状态中的，需要通过实现onChange来实现数据回流。

        双向数据绑定的好处是只需设置好绑定关系，框架就会自动实现内存数据模型与视图表现层的数据同步，简单方便。但是这个会带来一些坏处，容易出现数据的行为流向很难预测，信息同步风暴，造成不必要的性能开销，难以调试和维护。（回想15年，曾经为了解决java技术框架上的双向数据绑定的问题，连续36个小时奋战）

        那么，在两者之间如何抉择？

        个人还是偏向于React.js，主要考虑到的理由如下。

• 生态圈的健全可以减少出现问题后的解决成本。

• 单向数据绑定可以更清晰的管理应用的运行状态。

• 考虑到后续移动端的性能要求，进可以使用ReactNative来写接近C端性能的前端应用，退可用传统的B+C模式运行React.js的代码。最近facebook还增加基于React技术的VR设备开发框架，也就是说一次学习，可以玩遍全端，可进可退。

• React的设计思想真的很棒，通过编写组件，可以更好的锻练到你的抽象能力，提升设计水平。

  
  

以上是我的一些个人见解，谢谢。