Angular vs React vs Vue

---

前言

通过这几周的学习，下面对Angular， React 和Vue做一下总结对比，希望对你选择哪个框架有所帮助

---

一、Introduce

1. Start

• Angular 是由Google在2010年首次发布， 可以说是最早发布的一个前端框架， 它是基于Typescript的。在2016年，
  Angular发布了Angular 2，截止2021年6月angular 最新版本是 Angular12，而Angular1.0版本现在称为AngulaJS， 目前也仍在更新。
• React 是由Facebook 开发的，在2013年首次发布，目前稳定的版本是17.x, 发布在2020年10月，期间有许多小版本更新。
• Vue 相较于React和Angular 可以说是最年轻的框架，它是由前google员工尤雨溪 在2014年发布的，目前最新版本是Vue3.x， 发布在2020年9月。尽管Vue没有一家大公司的支持，但是他有自己GitHub repo， 而且目前已支持Typescript。

	Angular	React	Vue
开始	2010	2013	2014
官网	Angular	React	Vue
最新版本	12.x	17.x	3.x
开发者	Google	Facebook	尤雨溪
使用	Google, Wix	Facebook, Uber	阿里，GitLab
Npm weekly download	572,716	10,831,223	2,595,955

2. License

在我们使用这些框架之前，我们要确保通过了其许可证书，这三个框架都使用了MIT License。

3. Popularity

我们从GitHub的star 来比较他们的受欢迎程度，从图中我们可以看出目前vue是最受欢迎的，React紧随其后。

4. Job market

我们从过去12个月的Google Trends search，来看热度随时间变化的趋势，也可以按照地区看比较细分的数据。

二、Community and development

让我们来看看Angular， React与Vue关于他们的GitHub repo的统计数据

GitHub	Angular	React	Vue
# Watchers	3.2k	6.7k	6.3k
# Stars	74.3k	171k	185k
# Forks	19.5k	34.5k	29.5k
# Contributors	1431	1484	399
# Used By	1.9m	6.9m	151k

我们从图中可以看出，react 有最大量的watchers， stars，和forks， vue数量和react差不多，但是Vue的Contributors数量是最少的，这种情况可能是由于vue完全由开源社区驱动，而React和Angular在facebook和google占很大比例。对于Used By这个参数指标（其他repo 依赖这个repo的数量）， React 是最大的，而Vue是最少的，也许是因为vue是新的框架，并不能全面说明总体需求。

• Angular 每6个月发布一个大版本，如果一个API被弃用的话，还有额外的6个月缓冲期，所以这也给我们开发充分的时间来升级
• React 版本升级是最容易的，可以用react-codemod 来实现
• Vue 2 到Vue3 官网给出了 对比，所以升级迁移还是比较容易的。

三、Library Size

由于缓存（caching）和最小化（minification） 的使用，让library 的size都不是很大。 虽然框架的大小之间存在显著的差异，但是与平均网页的大小相比，他们仍然是很小的。
下面文件是从官网下载的，而我没有找到angular最近版本的js，只找到1.0的版本，但是我相信angular12的最新版本大小同样也是超不过2M的

	Angular	React	Vue
版本	1.5.6	17.0.2	3.1.4
Size	159k	121K+11K	151k

四、Learn curve

• Angular 他是一个完整的library， 如果我们要掌握Angular， 我们还需要学习Typescript 和
  MVC等概念，所以学习Angular是有一定难度的，但是这会让我们充分了解前端是如何运作的。
• React学习，可以通过看他的文档，他的文档是彻底和完整的，以及一些常见问题的解决方案，但是React不是一个完整的框架，如果想使用一些高级功能，需要集成第三方框架，所以react的学习难度，取决于我们所依附的功能。
• Vue 提供更高的自定义性，因为他是最容易入手的，Vue的灵活是一把双刃剑，它允许糟糕的代码，同样也使得调试和测试变得困难。

五、Use

1. Basic Use

	Angular	React	Vue	Notes
Angular Modules, Vue Components , React Components	@NgModule({ imports: [] )	(1)class Welcome extends React.Component { (2)函数式创建 function HelloComponent(props, /* context */) {return Hello {props.name} } (3) React.createClass 创建 function helloComponent(props) {return React.createElement(’‘div’, null, ‘hello’, props.name)}	Vue.component(‘my-component-name’, { /* … */ })	Modules are a container in Angular, holding other entities such as controllers, directives, etc.
Directives	@Directive({	/	Vue directives app.directive(‘focus’, {	Directives are not as powerful in vue, they seem to be more focused. in Angular a directive van be many things. better resembling a component in the vue world.
Interpolation	{{user}}	{user}	{{user}}
Model binding	[(ngModel)]=“user”	/	v-model=“user”
Loops	*ngFor=“let item of tiles”	{ this.state.tiles.map(() => return )}	v-for="(item, index) of tiles"
Conditionals	*ngIf=“user”	{ if (true) { }}	v-if=“user”	Vue提供了大量的指令，如v-once, v-bind, v-html, v-if, v-else, v-show, v-for
Conditional class	[ngClass]="{‘active’: isActive}" [Class]=“classObject”	className={classes}	:class="{ active: isActive }":class=“classObject”
Event binding	(click)=“onClick()”	onClick={this.onClick.bind(this)}	@clcik=“onClick()”	Vue提供了 许多事件修饰符，如.stop, .prevent, .self, 按键修饰符.enter, .tab, .delete 等， 还有系统修饰键 .exact等； 而react事件是没有提供该功能的，而Angular提供了少量的修饰符，如.enter，.propagation等

2. Debug

Vue 提供了 调试开发工具， 如图

3 Css 动画

Vue 提供了强大的动画效果，当然React 也可以通过代码来实现动画效果， Angular 同样也可以实现动画， 文中链接是官网动画的说明。

4 Create project

Angular	React	Vue
ng new my-app	npx create-react-app my-app	vue create hello-world

5 Dependencies

创建一个新的纯的项目，只集成了router，下面是对比
Angular Dependencies

React dependencies - React dependencies 十分的多，而且webpack配置十分复杂，这样使得维护成本会增多。

Vue Dependencies - Vue依赖是最少的，也是最轻便的。

六、Performance

Link

1. DOM manipulation

这个参数可以帮助我们确定哪个框架对于需要与 DOM 进行大量动态交互的应用程序性能更好。

2. Startup time

这有助于我们判断谁的初始加载时间更快，这对于需要更多速度的应用程序很有用。

3. Memory allocation

这揭示了哪些框架更好地与内存配合使用，例如，执行批量操作，例如从数据库中读取或编写数千条记录。

	Angular	React	Vue
DOM manipulation	1.46	1.58	1.1
Startup time	3.58	1.18	1.01
Memory allocation	1.28	1.2	1.0

Summrize

• Angular 框架是最成熟的，而且在贡献者方面有良好的支持，是一个完整的package， 然而他的学习难度是最陡峭的。
• React的优势是它足够灵活，他有大量的开发者从社区，React已经被广泛接受。
• Vue是比较新的框架，使用也很灵活，而且十分轻量级，但是没有一家大公司支持。在过去几年中，在很多中国巨头如阿里巴巴和百度，都选择Vue最为他们的前端框架。

	Angular	React	Vue
开始	2010	2013	2014
官网	Angular	React	Vue
最新版本	12	17.x	3.x
开发者	Google	Facebook	尤雨溪
使用	Google, Wix	Facebook, Uber	阿里，GitLab
Npm weekly download	572,716	10,831,223	2,595,955
Easy to learn	Learn Typescript	Medium	Easy
Size	159k	132K	151k
Documents	支持5中语言	支持17种语言	Vue文档里面提供了大量的视频学习，支持4种语言
Start Time	Longer due to its large codebase(5361ms)	Quick(4550ms)	Quick(2363ms)
Data binding	Bi - directional	Uni-directional	Bi - directional
Model	HTML DOM	Virtual DOM	Virtual DOM
Code reusability	Yes	No, only CSS	Yes, Css and HTML