[转]聊聊技术选型 - Angular2 vs Vue2

转载：https://juejin.im/post/58cab85b44d9040069f38f7a

"Come, and take choice of all my library, And so beguile thy sorrow." —— William Shakespeare, Titus Andronicus

为项目进行框架级别的技术选型，就相似为篮球队量身定制战术，选择一个适合开发团队的规模和团队成员的技术栈和能力，针对业务和项目，能帮助团队赢得更多的技术，是每一个软件项目可以顺利推动的先决条件，也是业务常青的有效的保障。这里，咱们来聊聊为一个新的前端项目挑选一个合适的技术模型，对比在去年都发布了 release 版本的 Angular2 和 Vue2（如下如没有特别指明，Angular 即为 Angular2，Vue 即为 Vue2），并不做鱼和熊掌哪一个更美味的选择，而是站在技术自己，对应项目和开发人员的角度，帮助工程师在所处的业务场景下挑选最好的武器。

技术

开发者

	Angular	Vue
开发者/团队	2016 年 release，核心由 Google 开发，周围有些生态环境组件由 Netflix，Babel 社区，微软等相关开发者开发，参与人数比较多，Google 后期不维护这个项目的可能性比较小，可是不能排除部分框架内使用的第三方组件（如 zone.js ）后期缺少维护的可能性	2016 年 release，由尤雨溪主导开发，目前做者已经全职开发 Vue，可是也不能彻底排除后期做者中止维护的可能性，目前 issue 少，报告的 bug 都修复了
业内使用状况	国内推广状况目前不明朗，国外比国内强，资料也比国内多	国内推广状况比较好，滴滴，阿里等不少团队都在用，国外推广状况也不错
文档和资料	提供中文文档（翻译质量通常），YouTube 资料不少	提供中文文档，资料相对 Angular 少一些

目前无法确切的评估将来一段时间这两个框架的维护状况，但基本能肯定的是，框架的生命周期不会比咱们大部分业务的生命周期短。Angular 的缺点在于，除了核心以外，像 core-js，rxjs，zone.js 等生产环境依赖的系统不是 Google 的人主导的，存在潜在质量问题的可能性，而且 Angular 目前已经发布了 Angular4 的 rc 版本（主版本跳过了 Angular3 ），后面预计半年进行一次主版本的更新，虽然相关开发人员承诺尽量向下兼容，可是后续对主版本的频繁升级对项目的影响仍是个未知数；Vue 因为做者是中国人，在国内推广的很好，口碑很不错，做者也清理 GitHub issue 的速度也很是快，坑会相对更少一些，后面也和阿里合做成为了 Weex 的官方框架，而 Angular 在国内目前形势还不是很清晰，主要缘由可能在于中文资料的数量远远小于英文资料。从国内的使用状况以及社区发展来看，Vue 更胜一筹。

语言

	Angular	Vue
官方使用语言	Typescript，官方提供 compiler-cli 把框架代码从 Typescript 直接编译到 Javascript 的 AST 语法树，属于对 Typescript 的深度支持	ES6+
语言的开发者	微软(主导开发 Typescript 的是 Anders Hejlsberg，此人也是 C# 语言的项目负责人 )	ECMAScript 标准委员会制定标准，各个浏览器厂商实现
语言特色	静态类型，提供静态检查，现有 ES6+ 的超集，官方提供的编译器可以支持编译到 ES5，ES6，贴合工程化的须要，适合团队使用，学习成本不高	动态类型，比较灵活，目前标准委员会每一年更新一次标准，加入新特性，一般使用Babel 以及插件编译到 ES5
IDE/编辑器支持状况	主流 IDE/编辑器支持，官方推荐 VS Code	主流 IDE/编辑器都支持，语言新特性 IDE 相对文本编辑器支持的更好
可否使用其余开发语言	也支持 Javascript 和 Dart，而且官方提供这两种语言的文档	也支持Typescript，但文档相对较少

为了不前端组件缺少一致的管理方式，重造轮子，解决多人在快速迭代中协做开发致使的代码逐渐混乱，Javascript 的动态类型增长了重构难度的状况，咱们但愿引入静态语言，经过类型检查使数据更清晰，经过接口规范开发行为，这一点 Angular 经过默认引入 Typescript 比 Vue 作的更好。Typescript 虽然自己是微软公司的产品，可是从编译器效率到使用体验均比目前的 Javascript 要强，在编写 ES6+ 代码时，常常由于 Babel 插件质量问题致使的坑，能避免不少。

工具

	Angular	Vue
项目搭建工具	ng-cli	vue-cli
debug工具	Augruy	vue-devtools

ng-cli 提供了包括从开发阶段架设前端 server 服务，代码生成，查阅文档，测试，到部署过程的构建等的一系列指令，相比 vue-cli 只提供基础的项目初始化和构建功能，ng-cli 更好用。在 debug 工具层面，Vue 作的更好，vue-devtools 整合了 Vue 的状态管理工具 vuex，而使用 Angular 的状态管理方案 ngrx 的时候，则须要配合 Redux DevTools Extension。

除了 ng-cli，angular2-webpack-starter 也提供了完整的 Angular + Webpack 的种子项目。咱们也能够根据业务调整具体的构建过程。

设计

从设计上看，Angular 提供了难以撼动的全面的解决方案，基本照顾到了开发流程的每一个节点，他的 Form 支持，DI，测试流程，都是在开发体验上优于 Vue 的点，可是为了追求全面性，Angular 就没法避免的存在构建后体积大小和整个框架侵入性太强的问题。而 Vue 做为渐进加强的框架，不在一开始就在使用场景和模式上限制用户，而是经过官方提供的扩展，以及第三方扩展，逐渐为更复杂的需求场景提供解决方案，也给用户提供了选择的余地。

	Angular2	Vue2
组件	组件是ng2应用的核心 ng2的组件支持了 Web Component 标准 每一个组件有明确的生命周期	具有完善的组件系统 组件能够从 template 生成也能够用 render 渲染 组件有明确的生命周期 使用 virtual dom 渲染 性能很好
路由	使用官方的 @angular/router	使用vue-router
异步处理	官方支持 RxJS，经过流模型处理异步	没有官方的异步处理方案，能够用Promise，也可使用 RxJS
事件绑定	MVVM 模型，提供指令，指令相对 Angular1 作了性能优化	MVVM 模型，提供指令
动画	基于标准的Web动画API(Web Animations API)I)构建，对不支持的浏览器提供polyfill	提供 v-animation 和 v-transition 等指令
状态管理	ngrx	vuex
构建和部署	分 Just In Time（JIT）模式和 Ahead Of Time（AOT）模式，配合 tree shaking 能够大幅度减小打包代码的体积	配合wepack等打包工具构建和部署，在不引入过多周边生态组件的状况下要比 Angular 体积更小
安全	对不信任值进行编码，避免了 XSS 攻击 使用离线模版编译器，防止模版注入 官方 http 库可以防止 XSRF	没有强制性组织 XSS 攻击的机制，输出 HTML 要注意配合 v-html 指令

性能

咱们截取 Vue 官方文档上关于两个框架性能的对比报告截图。对比了 Angular 在去年 8 月发布的 rc 版本和同期 Vue beta 版本的不一样操做的性能。能够看出，两个框架都很是的快，Angural 和 Vue 在大多操做上性能指标均处同一个数量级，Vue 在部分指标上略胜一筹。

在内存占用上，Vue 要优于 Angular，可是 Angular 框架自己提供了很是多的特性，而 Vue 在开发过程当中引入 vue-router，vuex，vue-class-component 逐步发展为 Vue 全家桶的过程当中，会逐步增加对内存的需求。

 

开发模式

从学习曲线上看，Angular 要更陡峭，Vue 要相对平缓一些。在Web Componnet，PWA 上，Angular 要比 Vue 走的更远，更适合将来的标准，面向 Google 本身的技术栈。从可以开发的应用的全面性上，Angular 和 Vue 相差无几。

	Angular2	Vue2
兼容性	浏览器支持	支持到 IE8 以上
Web Component	支持	不支持
PWA	支持	支持
SSR	支持	支持
Native App	Nativescript + Angular	Weex
Desktop App	angular-electron	electron-vue

弹性

在业务开发中，技术选型并不能仅仅知足当前的业务需求的须要，而要考虑当前业务的状态，是刚刚开始，持续发展，仍是稳定维护。考虑到业务后期可能出现的增加状况，这就要求咱们选择的技术具有必定的弹性，可以随着业务伸缩，避免后期维护成本太高，扩展困难的状况的发生。

 

• 这里截取了前端框架选型迁移的统计状况。y 轴表明迁移以前的选型，x 轴表明迁移以后的选型。表格中颜色越深，表明从选型 A 到选型 B 进行迁移的案例越多。能够发现，你们最多选型迁移的目标是 React，选择迁移到 Angular 的案例要比选择迁移到 Vue 的案例多，选择迁移到 Vue 的，绝大多数是 React 用户（相反从 Vue 迁移到 React 的用户也有必定数量）；而从 Angular 或 Vue 迁移到其余框架的案例较少，侧面证实了这两个框架在目前业界具有足够的弹性

 

 

 

 

业务场景

这里咱们以点评点餐的内部数据系统为例。咱们把系统对不一样前端使用场景的频率和要求从0到10进行打分，分值越高的，相应场景的需求要求就越高，反之就越低。咱们发现，咱们的需求集中在图表绘制，组件管理和表单的提交校验上。数量较多的组件对于咱们的组件管理方式提出了较高的要求；在已有的系统中咱们对 highcharts 和 echarts 都有依赖，可是将逐步把图表组件迁移到 echarts 上。对于echarts，目前有vue-echarts，对于highcharts，有人作了angular2-highcharts。

	PC端	移动端	查询平台	配置系统
表单提交	7	5	6	6
UI交互和组件	9	8	7	9
异步操做	5	4	4	8
动画	2	2	1	2
组件状态管理的复杂度	4	3	1	7
浏览器支持要求	5	7	5	5
echarts	2	8	5	8
highcharts	8	0	0	0
性能	3	4	3	5

开发人员

目前点餐数据系统平常人力 1 人，对多人协做开发要求比较低，开发效率要求比较高，单个项目规模不大，有多端多项目开发的要求，技术选型可以适应快速迭代是一个目标，最大程度上的减小人力瓶颈的出现。

结论

首先，技术上对比 Angular 和 Vue，都是值得长线投资的技术。Angular 提供大一统式的解决方案，从浏览器端，服务端，客户端都有涉及，这种大一统的方案，优势在于在几乎任何场景，框架都提供了标准化的行为，而 Angular 经过一种侵入式较强的编程范式，规范了使用框架的全部开发者的开发行为，更工程化，更适合大型项目多人协做，同时，框架自己更拥抱标准，面向新特性，后面发展空间很大，而缺点是，这种大一统的方案，没法单独由谷歌提供，谷歌除了开发 Angular 的核心模块以外，在异步处理，状态管理，周边工具，使用了为数很多的第三方的库或组件，这些库和组件的行为是否会出现问题，和后续发展，很难预测，潜在增长了风险，这些第三方的库和组件，也有下降应用性能的可能性。

Vue 的切入角度是，这个框架能够被不一样程度的使用，能够单独使用核心组件的部分，也能够加入状态管理，也能够加入路由管理，从一部分使用 Vue 到全站使用 Vue 开发，提供了开发者更多的选项，也借鉴了不一样的框架，并对其优势单独为 Vue 进行了加强。这种精简和灵巧，很是适合项目初期的快速迭代，性能上，也没有很大缺陷，随着项目发展，性能也不会成为明显的问题。Vue 的潜在问题在于，因为提供了开发选项，在多人协做开发的状况下，不一样开发者对于 Vue 使用程度和场景的处理可能会不同，而随着项目增加，以“快”为特色的技术，在工程化和代码的管理上可能会出现困难，而像 Angular 提供的 DI 等功能，Vue 实现相似的功能就须要程序员进行手动控制，带来了潜在的代码管理的问题，目前虽然业界有很多使用 Vue 的场景，可是大型线上在稳定发展期业务，几乎是没有的。使用 Vue 在项目规模变大后，怎么处理 Vue 在项目中的地位，怎么组织代码，都是咱们须要考虑的。

在咱们的业务和人力层面，咱们对数据平台架构的规划是多端多层的，架构层服务于应用层，应用层服务于用户。对于用户层，新开始的项目面临逻辑常常调整的可能性，也就是说对于应用层，咱们须要一个灵活，可以适应快速迭代的框架，而应用层的多种设备多种环境，也要求咱们对性能要有起码的考虑，目前现有的组件和库，也但愿新的框架可以作较好的兼容和提供现成的解决方案。这种状况下，Vue 是比较推荐的，后期随着应用端发展，Vue 可以确保没有性能瓶颈，也给了咱们后期引入更多 Vue 解决方案，造成 Vue 全家桶或者撤掉 Vue，用其余方案的空间。而对于架构层，它发展的速度未必有应用层快，它对业务的要求是稳定，可以增量开发，尽可能避免推倒重来影响应用层，同时，它性能的要求明显没有应用层高，这种状况，咱们须要单独区分一下，例如若是须要作应用层的通用配置系统，配置应用层的 UI 组件，那么显然这个系统的组件框架要和应用层一致，而像自助查询平台或其余项目，咱们可使用 Angular，为后来的技术栈作技术储备。

对于新项目，咱们技术选型可能未必选择一种，能够根据特色和业务都进行尝试，使用一段时间后，反馈给整个团队，这样，对不一样的框架，咱们后期都有技术储备，能保证咱们手里能打的牌较多，不至于由于需求变的被动。因此咱们在点餐数据产品中，Angular 和 Vue 都进行了尝试，也将在后续文章中，分享两个不一样技术栈在平常开发细节上咱们的积累

做者：美团点评点餐 连接：https://juejin.im/post/58cab85b44d9040069f38f7a 来源：掘金 著做权归做者全部。商业转载请联系做者得到受权，非商业转载请注明出处。