阅读 2948

细说vue react angular 区别,快速搞定技术选型!

前言

入行三年多,由于最近开始接手angular项目,到此为止,算是三大框架都撸了一遍了,不敢说熟练使用,但是也是有了一些使用和选型心得了,在此尝试细说三大框架的优点以区别,加深自己理解的同时,帮助大家快速搞定技术选型。

首先交代一下三大框架使用情况,vue 使用最多,从头贯穿到现在,其次是react,angular排在最后,仅仅三月有余,完全是被动学习,原因很简单,国内真的没有人用,找到一个能有使用angular 的公司真是难上加难,先来看下大佬整理的国内的三大框架使用情况!

React:蚂蚁数据可视化、爱彼迎、飞猪、阿里大于、虾米音乐、口碑开放平台、猫途鹰、喜马拉雅、斗鱼、知乎、豆瓣、美团外卖H5、房多多、石墨文档、墨刀、TalkingData、xiaopiu、Teambition、Uber、倍洽、同盾科技、心知天气、拼多多(APP内嵌H5)、滴滴出行、Sentry、途牛、优酷、京东服饰+生鲜+旅行+赚钱H5、瓜子金融H5、算力矩阵、链家H5、阿里云管理后台、Coding、CodePen、树莓派、36氪、Notion、GoDaddy、站酷海洛、Plotly、麦客CRM、特赞营销日历、鹿班、网易云阅读PC端+网易云音乐H5、猎聘网、看云文档编辑页、NIKE官网、丁香医生、去哪儿H5多个模块、艺龙H5个别模块、租租车H5、汽车之家车商城、PayPal中国、Pocket、友盟、iH5...

Vue:饿了么、爱奇艺、中国平安H5、简书、途虎养车、小红书、乐视商城、手机搜狐、优酷、土豆、掘金、微博H5、大麦网H5、唯品会H5、小米商城H5、芒果TV移动版、哔哩哔哩、又拍云、七麦数据、OneAPM、阿拉丁小程序统计、网易云信+手机网易+网易邮箱H5登录页、今日头条+西瓜视频网页版、贝店(APP内嵌H5)、大搜车、滴滴开源、高德开放平台、京东拼购+领券+新人频道H5+京东云、瓜子二手车H5、土巴兔、分期乐、BITMAIN、小猪短租H5、IT桔子、创业邦H5、拍拍贷、极客邦科技+极客时间、开源中国、少数派、蓝湖、百度指数、微信公众平台、大鱼号(UC云观)、创客贴、兑吧、国美电器H5、聚美优品触屏版、钱咖、试客小兵、赚客、雪球财经、电玩巴士、Hao123触屏版、弹个车、携程H5多个模块、穷游网、一加手机...

AngularJS:百度脑图、eolinker、海致BDP、极光、Worktile、锤子科技官网、微信网页版、iTunes Connect、阿里云管理后台、鲸准对接平台...

从上面数据来看,vue react 旗鼓相当,但是angular着实有点惨淡,接下来说一下三大框架的好坏

框架之争

首先抛出个人观点,三大框架都是好框架,他们都有着完成大型项目的能力,都有着活跃的社区(但是在中国angular差点,遇见问题百度基本搜不到解决方案着实令人着急),其实,这么久一来,框架好坏之争一直是个前端工程师,打口水仗的必备话题,最开始我也喜欢vue,他响应式的写法,简洁的语法,以及不用借助工具,单纯引入cdn文件就能开发的能力,着实令人着迷,但是后来我发现,react 更灵活的写法,处处都能秀的最佳实践,以及更多的选择所带来的新鲜感,连一个css 都能给玩出花来,在后来,接触了angular 发现他又大又全的能力,更好的工程化,强制性分层、依赖注入,以及ts天然的代码检查能力,也非常香,那么问题来了,那个才是最好的框架呢?

答案是,没有最好的框架,他么都是好框架,主要看使用框架的人好不好,强不强,厉害不厉害,但是,现在大多数前端码农依旧还在为自己的喜好而争个胜负。框架只是接管、包裹、组织,从这个角度来说,各框架都一样。不一样的是范式和编程模式,灵活的函数式,森严的面向对象方式,以及借助各种思想工具减少我们的开发时间,优化我们的开发体验,选框架,只不过是信仰,并没有好坏之分,就好像你信任佛教,他信任基督教一样。

三大框架的特点

vue

先来说vue 这个我使用最多的框架,也是github中的小星星最多的框架,一般前端老人比较喜欢使用,我还依稀的记得跟我们领导一块吃饭的时候酒过三巡,我问领导为啥你这么喜欢vue,领导算前端老人,属于最早入行的一批前端,七八年工作经验,他说,对于我们老人来说,他们是从ie6过来的,在jquery那个年代,他们对于jquery那种频繁操作dom的繁琐的开发方式相当痛苦,后来三大框架出来,也都用了一遍,后来发现,vue的模板语法,对于他们来说,相当亲切,数据驱动视图的理念,隐藏操作dom的繁琐步骤,以及渐进式的集成,他接着说,年纪大了,学不动了,vue的简单,上手快,最主要的是,好招人(这个年限了,大部分都是领导了),等优点,真的是爱不释手。

接下来,咱来细说一下我认为的vue的优点

1、响应式

响应式的系统可谓相当方便,也就是基于是数据可变的,通过对每一个属性建立Watcher来监听,当属性变化的时候,响应式的更新对应的虚拟dom。具体原理不在赘述,直接上图:

2、模板语法

在vue中,我们就行在写html一样自由畅快,这就得利于vue的模板语法

<p>{{message}}</p>
复制代码

为啥之前说前端老人喜欢用vue,因为他的模板语法,对于老前端来说相当的亲切,因为他们都是从html过来的,那我们的模板语法到底是怎么来的呢?

首先我们说vue的模板其实不html,那么既然不是html他一定是被转换成了一个js代码,就是所谓的模板编译,在vue 中使用的就是vue-template-compiler这个模板编译工具, 那这个工具做了什么呢?其实就是将 Vue 2.0 模板预编译为渲染函数(template => ast => render)

//模板代码
const compiler = require('vue-template-compiler')
const result = compiler.compile(`
  <div id="test">
    <div>
      <p>This is my vue render test</p>
    </div>
    <p>my name is {{myName}}</p>
  </div>`
)

console.log(result)
复制代码
{
//编译结果
  ast: {
    type: 1,
    tag: 'div',
    attrsList: [ [Object] ],
    attrsMap: { id: 'test' },
    rawAttrsMap: {},
    parent: undefined,
    children: [ [Object], [Object], [Object] ],
    plain: false,
    attrs: [ [Object] ],
    static: false,
    staticRoot: false
  },
  render: `with(this){return _c('div',{attrs:{"id":"test"}},[
        _m(0),          // 上述提到的静态子树,索引为0 <div><p>This is my vue render test</p></div>
        _v(" "),        // 空白节点 </div> <p> 之间的换行内容
        _c('p',[_v("my name is "+_s(myName))])  // <p>my name is {{myName}}</p>
    ])}`,
  staticRenderFns: [
    `with(this){return _c('div',[_c('p',[_v("This is my vue render test")])])}`
  ],
  errors: [],
  tips: []
}
复制代码

然后我们执行这个render函数,就会返回一个vnode,接下来就是我们熟悉的diff算法,到更新视图

3、实现MVVM

实现了MVVM我至少认为这是一个福音,用数据去驱动视图,简化繁琐的操作dom,更关注与业务逻辑,这样就能节省开发时间,和写出易于维护的代码,那么什么叫mvvm呢?

直接上图,view, 和model很好理解,那么viewmodel到底是什么呢?他是一个抽象的东西,在vue 中viewmodel其实就是比如我们的方法,我们的事件,等等,都是这一层,这一层的操作,帮助改变数据,或者改变视图,起到承上启下的作用,也实现了,vue非常经典的数据双向绑定

4、使用友好,上手简单

这是vue最为亮眼的一点,比起react的jsx,比起angular的rxjs,以及各种依赖注入,vue 的语法风格,和使用api相当友好,社区也都有都一些相对固定的方案,当然,还有一点比较幸福的是vue的性能优化做的相当到位,不用我们手动优化,不用像react那样父组件更新render子组件也要跟新,到底还是中国人写的,有那么点中庸之道的意思,把简单和选择留给别人,复杂和无奈留给自己……

5、弱化性能优化,用户只需关注逻辑

相比与react和angular vue在按照模板格式开发时就没有太多限制,得益于响应式系统,也不用去做相对应的性能优化,由于vue 内部的模板语法,能在开发环境下编译,这样就能在编译的时候去做一些性能优化比如,在这段vue我明确知道第二个name是变量这样在内部就会有针对性的优化

<template>
    <ul>
        <li>0</li>
        <li>{{ name }}</li>
        <li>2</li>
        <li>3</li>
    </ul>
</template>
复制代码

而在react 中,由于jsx的写法灵活,不确定性多,所以在编译时就无法去做性能优化,而性能优化放到了我么开发者身上

<ul>{
    data.map((name, i) => <li>{i !== 1 ? i : name}</li>)
}</ul>
复制代码

react

1、不可变值的设计思想,也是函数式编程的实践

我们知道,在react中性能优化的权利交给了开发者,所以,在默认情况下当react 的父组件更新时,子组件必然更新,这样,就需要我们使用react 提供的一些优化手段,比如scu,比如purecomponent和memo等,来进行相关的性能优化,我们知道 ShouldComponentUpdate(SCU)可以用来阻断更新的蔓延。但是React组件默认并没有实现它,因而需要开发者来判断是否需要对应用进行性能优化。在这个方法中,你可以检测组件的state或props是否被修改,如果没有修改那么将返回false,那么这个组件和它的子组件都不会被重新渲染。问题在于这里:如果数据是可变的,并且被直接修改了,SCU会一直返回false,这就导致组件永远不被重新渲染,在设计之初,这个不可变值的的理念就贯穿react,甚至还为不可变值专门耗时两年开发了Immutable.js 这个js的库,这也是函数式编程的理念。

2、all in js

在react中一切皆js,其实所谓的jsx也只是一个语法糖,正是由于这样的开发体验,许多开发者会有种写的更爽的感觉,他没有vue中各种模板语法的限制,编写自由度高,他注重更更大的颗粒度拆分,推重组件化的设计思想,在react 中一切皆是组件,一个大型的项目都是有一个个组件仿佛积木一般堆积而成

3、活跃的社区,繁荣的生态

这一点是react 最为骄傲的一点,他清楚自己应该做什么,剩下都交给了社区去做,他不像vue一样,生态社区相对稳定,基本上一套下来整个社区都认可一些相对固定的方案,而在react中可谓百花齐放,比如在公共数据状态管理就有redux,mobx,还有最近出来的concent 的也是让人耳目一新,比如css 也是不可开交,前有sass,less,后又css in js 的style-components,在比如,一个可以实现在redux中实现异步的中间件就有redux-thunk,和redux-saga等等,更别提在react基础上出现的dvajs,这样一个用于代替redux的库,以及umi的出现,目的是为了代替cra,总之有选择困难症的同学用react可要慎重,因为,选择真的太多了,你会无从下手。正是由于react这开放的思维方式(对应中国人的vue中庸),各种轮子层出不穷,大家搞研究的热情不减,前端也越来越重要,工资也越来越高。我觉得好多大厂之所以选择react正是因为react折腾起来顺手,都是技术大牛,谁不想没事搞搞大新闻,是吧!

4、多端发展跨平台的能力

由于RN的加持,搞定react的语法之后,你甚至就可以去手撸一个app,这里vue 是做不到的 ,也正是因为这样,你会发现,在react 中的事件是自己写的,而不是用的浏览器原生的,就是因为他需要用自己写的这一套合成事件的机制来实现跨端事件,原理其实很简单

入上图所示,就是react 自己的事件机制,这样就能实现很好的跨平台能力。

5、Fiber(时间分片)

react16中新增了Fiber(时间分片),这种渲染机制,他将Reconcilation阶段的人物分成一个个执行单元,也就是所谓的fiber,然后利用requestIdleCallback这个方法去在主进程空闲的状态下执行一个个fiber,原理如下:

如此一来,大致解决了由于react渲染时由于diff计算过长占用主进程所带来的卡顿,以及掉帧问题。

angular

由于angular 仅上手三个月,诸多原理不甚了解,大致列举一下,

提供了完成的端到端的解决方案

之前之所以说angular 又大又全,是因为,他不需要借助社区的力量,仅仅靠自己就能实现一个产品从开始到上线的解决方案,比如,他提供完备的单元测试方案,这里你在新建组件的时候都会给你一个测试的ts,在比如,他会提供开发时所需的所有服务,比如http服务,比如router服务,比如公共数据管理服务service,这些angular 全部完备,他更像是一个后端语言,严格的类型检查,拥抱ts,强制性分层,以及更好的工程,面向对象编程的思想。angular很高大全同时也很复杂,angular官方库给了你一切你想要的,使用angular技术栈,基本上你不用对组件选型浪费太多时间精力(对比react)。

三大框架的一些区别和联系

联系

我在学习三大框架时,发现我学vue 是一个月,可能到了react就需要20天,在到angular 可能也就需要15天了,其实是因为他们都有着千丝万缕的联系,只要这个思想有了,那么三大框架的学习难度是逐渐降低的,尽管行业都是angulr比react难学,react比vue难学,接下来我们就来说说他们的联系

1、组件化

三大框架中,都是提倡组件化开发的框架,所以,比如当你在开发vue的项目时,具备组件化的思想,在平常开发中能够有意识的去抽离展示型组件,和容器型组件,那么,在开发react 和angular时,你只会得心应手,不会处处为难

2、都是数据驱动视图

三大框架,都是属于mvvm框架,数据驱动视图的思想始终贯穿始终,所以我们在开发时,只需要关注数据变化即可,虽然使用方式不尽相同,react 属于函数式,angular 和vue 属于声明式编程,但是,数据驱动的思想不变,比如react 使用setState赋值,而vue 和angular 使用显式直接赋值他们最后的目的都是改值,从而触发页面更新

3、共同的开发套路

在三大框架中,由于都遵循组件化思想,所以,都有着相同的开发套路,只是使用方式略有差别,比如,都有父子组件传递,都有数据管理框架,都有前端路由,都有插槽,只不过在anguar中叫做投影组件,在react 中叫组合,都能实现一些所谓的高阶(hoc)函数

所以当你掌握其中一个框架以后,那么在其他框架遇见上述类似的业务场景时,只需百度只需百度其他框架类似的用法即可,到这里我终于明白刚入行是,领导告诉我,学程序,就是学思想。有了思想,框架之间就会没有壁垒。

区别

我所知道的联系基本也就这么多,其实这些联系基本能应付日常的业务开发,很多人之所以感觉学完三个框架吃力,是因为,在框架之外延伸出来的知识,是无穷无尽的,比如,你想要会用三大框架,ts ,rxjs,redux,vuex,mobx,router,node ,npm ,webpack,中间件等你多少都要知道一点,因为每个框架选择拥抱的社区不一样,那么我们需要学习的东西他就不一样,但是,当你给这些都了解完成时候,发现,其实他们的大多数的使用方式和思想也都是有相似之处,接下来说说区别

模板 vs JSX

React与Vue,angular最大的不同是模板的编写。Vue和angulr鼓励你去写近似常规HTML的模板。写起来很接近标准HTML元素,只是多了一些属性。而react则崇尚all in js 所以独创jsx的编写风格,但是他们本质上都是一个语法糖,编译之后都是一个可执行的函数,

Virtual DOM vs Incremental DOM

在底层渲染方面,vue 和react 都使用的虚拟dom,而angular 却没有使用,查了一下,他好像使用的是Incremental DOM,具体区别请移步 了解Angular Ivy: Incremental DOM 和 Virtual DOM

函数式编程,声明式编程

在react中不可变值贯穿整个框架,如果你要改变数据,那么必须调用api去改,这就是函数式编程的思想,而在vue,和angualr中,声明式编程的思想也深入人心,既方便有快捷。这种直接赋值的方式,和用api赋值的方式,其实,只是用法不同而已,本质还是数据驱动

社区复杂度

在angular 和vue 中,几乎给你想要的全部给你了,而react 追求的更多的是自力更生,所以,有选择困难症的人才会如此的纠结。

入门难度

angular 工程化最好的框架,,也是由于拥抱rxjs,和ts(到现在ts的泛型我都搞不明白),也是最难的框架

react 上手也也比较简单,尤其是16引入hooks之后,号称api终结者,但是由于社区太过活跃各种新东西层出不穷,中文文档晦涩难懂,导致相对于vue上手也有难度

vue由于是中国人写的,有着完善的中文文档,和稳定的社区,并且有着亲切的模板语法,应当说是入门相对来说是最简单的了。

三大框架应该怎么选

对于学习

对于学习来说,我是三个框架的使用都在学习,毕竟艺多不压身,但是还是注重react,和vue ,毕竟在国内,这两个好了才能吃饱饭,之所以三个框架都要学习,是由于我的感受就是,体会到三个框架都有点以及缺点,由于思想都有相似之处,那么,在之后的项目中,就能知道前辈这样写的好处,以及用心,比如,我在写angular 的框架中,由于需要缓存路由页面,那么我就会给数据存在service中,那么在写react时,我突然就知道了,为啥当时写react 项目时由于用了redux,领导建议给所有数据存在redux中,在比如angular中由于ts天然的语法检查,使用了之后直呼真香,那么之后在使用react的时候就会引入prop-types等静态类型检查的工具去防止诡异的bug。所以,我建议就学习来说,有时间三大框架都学习一下。

对于个人项目

对于个人项目来说,三大框架那都是有一战之力,如果你是接的私活,那么一定要用自己最熟悉的框架,因为我的之前经验是,用之前没用过的东西,折腾起来太累了,很多坑。搞得时间长了,私活这点钱,还不如公司多加加班的加班费高,得不偿失。但是如果是自己折腾的项目,那就随便了,想用啥用啥,毕竟有的人就是觉得vue的烂七八糟的指令用起来太费劲呢

对于公司项目

对于公司的项目就要谨慎了,要考虑现有的团队资源,项目需求以及技术上的风险,以及公司的招聘成本,其实对于三大框架来说,对于大型项目也都是能hold住的的,技术选型选的后期,到底还是选设计能力。设计的好,三大框架都能胜任大型项目,主要技术选型还是人的问题,

1、由于vue 上手快,容易招人,所以,如果项目紧急,公司前端团队整体技术实力薄弱,那么vue是个非常不错的选择

2、如果是超大型项目,公司人手又足,技术实力强悍,学习能力强,那么angular绝对是不二之选,就可维护来说,angualr 绝对是上上选,但是就我写着三个多月的angualr来说,如果前端团队整体水平参差不齐,真的是没法维护,写到后期你绝对会有找代码三小时,写代码三分钟的体会(别问为什么)

3、如果团队内部,技术实力还行,但是时间有限,那么react,和vue 那都是不错选择,当然更推荐react一些,因为写的更爽,那种成就感,不言而喻!之所以不推荐angualr 就项目而言 ng 的局限实在太大。ts ,rxjs ,装饰器,依赖注入…… 学习成本实在太高

4、如果要考虑兼容性,那还是什么都别用的好,老老实实jquery吧!

以上只是建议,总是技术选型,要考虑的问题太多了,也免不了和人打交道,比如,公司的架构是个后端的,那么他肯定首推angualr,这时作为前端组长,也只能听命了,在比如,公司之前项目是react,那么这时有新项目时,要不要增加团队的成员的学习成本,也是要考虑的问题,总之,在技术选型时,不能形成鄙视链,有人觉得angular牛逼,看不起用react,和vue的,觉得ts ,rxjs ,装饰器,依赖注入等这些新东西会了以后,就视别人为菜鸡,其实,这些思想并不是你们设计的,而且,如果选型之后,对基层程序员要求自然也提升了一个档次,美其名曰是能筛选更优秀的人,但是也想想,为啥优秀的人为啥要在年这当个小兵。所以千万不要人云亦云,听别人说什么好,那他就是好的,其实对于公司来说,合适才是最重要的,并不一定是最好的。

最后

终于总结完了,其实对三个框架,也只是能用的阶段,总结的比较笼统,老规矩不对之处请大佬留言指点。