实用比较,帮你决策到底选择Vue还是Angular4、5

简介: 本人从Angular2时代开始用,当时全国都没什么人敢碰Angular2,我们就靠着啃它源代码中的注释,熟悉了Angular2的用法,并在实用中,还给Angular2团队提交bug。

本人从Angular2时代开始用,当时全国都没什么人敢碰Angular2,我们就靠着啃它源代码中的注释,熟悉了Angular2的用法,并在实用中,还给Angular2团队提交bug。

 

因此,这里提供给大家最实用的比较,帮助大家在Vue和Angular之间选择。

 

先说结论:用 vue + es6。不要考虑Angular,它有2个致命问题,导致它并不适合实用。

 

我们分几个关键方面来说:

* 功能上,vue其实和Angular几乎一模一样。

如果只看入门教程,很多人会觉得vue很简单,angular强大而复杂。但我是先学的Angular2,再发现vue的存在,所以我直接深入了vue的文档。

 

一旦深入就发现,vue其实提供了几乎完全一样的功能,当你要用到这些功能时,vue瞬间就会变得和Angular2~4一样复杂。

 

原本,vue都是基于es5,视觉上,还会觉得vue和angular4区别挺大。现在vue2.5开始支持typescript,你去看看那个组件编写方式,几乎就和angular4一模一样了。

 

* 学习曲线上,vue入门容易,深入下去和angular4几乎一样。

vue最大的成功之一,就在于他的文档由浅入深,不需要立马知道的信息,入门教程暂时不提,从而降低上手门槛。

 

而angular的教程,一上来就是cli, npm, typescript,一大堆东西砸到你面前,每个东西他都要提一大段,连组件的理念,都要讲半天,教程门槛,一下子就被拉高了。

 

以游戏打比方,level 1的你进入游戏,vue给你level2的对手,然后level4, 6, 8 逐渐提升。

 

而angular是,直接拉你到38级的boss面前,告诉你这就是你以后要面对的,并且讲一大堆,你需要做哪些准备。讲完了,让你现场练级,直接打倒这个boss,从1级瞬间跳到38级。

 

而vue之所以教程能如此简单,因为他基于es5,开头可以不提组件理念,不提typescript,照样能用。Vue的typescript支持,都没放在教程正文提,几乎算是在附录提了下。

 

因此,入门教程的复杂性,决定了angular的人气无论如何不可能和vue比。

 

* 运行速度上,差不多,可以无视区别。

 

两者的性能,都比 react 和 angular 1.x 好很多,而两者之间,虽然理论有差异,但用户角度很难区别,所以这个不用太多考虑。

 

* 运行库尺寸上,vue完胜,angular过于笨重。但vue现在也有越来越重的趋势。

 

angular压缩后168kb,真的太笨重了!而vue 早期压缩后不到50kb,但现在vue开始支持typescript之后,有越来越大的趋势,最新版压缩后已经到了89kb,也开始有点重了。

 

* 调试和维护上,angular比vue更难调试;vue比angular更难维护。

angular代码很规范,很好维护和审查,但它在控制台的报错信息太差了,经常看不出到底问题在哪,导致调试非常辛苦,有时候可以说是痛不欲生,尤其是,这个问题不是你可以解决的,除了提交建议,你没有什么好办法。

 

而vue基于es5的语法实在是很混乱,兼容es5看似让vue好上手,但用起来全是坑。光是那个{}套{},就晕死你。但这个问题,是可以靠使用es6规范回避掉一部分的。

 

另外,调试这个问题,由于angular用typescript+webpack封装,导致本来就很难调试了,控制台报错再差一点,真的很痛苦。

 

而vue在开发阶段,其实是可以直接用es6,而不用typescript和webpack的,这意味着,控制台报错将是最准确的原始出错信息,能够最快完成调试工作。这一点,angular是做不到的。

 

* 最后,开源库的丰富程度:vue更丰富,但更混乱,尤其是那些es5写的库。angular4少很多,但更清晰,没有es5~6的跨度问题。

 

vue的热门库、新开源库,很多陆续转为es6了,但更多库还没转。你有很高概率会面对那些库,而且vue存在从0.x到1.x再到2.x的迁移问题,所以你多少是要受点罪的。

 

而angular4其实并不热门,提到的人多,去用的人少得可怜,所以开源库也不多。你有很高的概率,需要去找普通js库,然后自己改造成angular4的组件。

-----------------

本人最终放弃了angular,关键原因在于:

难调试+笨重。

这两点几乎给angular判了死刑。本人在深知angular4的优点基础上,依然选择扔掉它。然而,es5这个大坑我们是不想再跳了,因此,vue+es6成了最完美的选择:

 

既享受了类似angular4的功能和规范,又避免了笨重和调试问题。

 

* 未来:理想情况是,两者区别会越来越小,最终感受不到区别。不理想情况是,angular被淘汰。

 

如今,一旦启用typescript,vue和angular的区别就真的很小了。

因此,如果哪天angular的调试信息更加准确有效,而且尺寸降下来(或vue尺寸继续加大),这两者的区别将会小到可以忽略。但如果angular做不到,则早晚要全面输给vue而被淘汰。

 

从前端的历史发展来看,新框架迅速流行,然后迅速被淘汰,周而复始。因此经验丰富的团队对前端框架都比较避讳,更愿意选择轻量的第三方库,而不选择大而全的框架。

 

你看react和angular今天很火,但react不是原生Html而是写模版,而angular大而全而笨重,都属于历史长河中很容易流行几年,然后被淘汰的框架类型。虽然他们有大公司支撑,生命周期会更长,但排除大公司因素,这种框架我们还是要尽量避免。

 

目前,我们判断,angular比较适合:公司内部项目,或面向对象团队转型全栈开发。

这种情况下,团队深知面向对象、代码规范的好处,并且没有es5标准的包袱,直接从typescript入门。虽然,调试的坑依然还在,但其他方面,则好很多。

 

不然,就像开头的结论那样:vue+es6,是最佳选择。别用es5,其中的苦,用过都知道。

原文发布时间为:20180109

原文作者:butaixianran 

本文来源:开源中国 如需转载请联系原作者


目录
相关文章
|
6月前
|
JavaScript
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
Angular使用@Input和@Output实现父子组件互相传参(类似Vue的props和this.emit)
|
6月前
|
JavaScript 前端开发 API
vue与angular以及react的区别
vue与angular以及react的区别
|
6月前
|
前端开发 JavaScript
JavaScript 前端框架相关: React、Vue或Angular中组件化的概念是什么?
JavaScript 前端框架相关: React、Vue或Angular中组件化的概念是什么?
105 3
|
2月前
|
前端开发 JavaScript 开发者
Express.js与前端框架的集成:React、Vue和Angular的示例与技巧
本文介绍了如何将简洁灵活的Node.js后端框架Express.js与三大流行前端框架——React、Vue及Angular进行集成,以提升开发效率与代码可维护性。文中提供了详细的示例代码和实用技巧,展示了如何利用Express.js处理路由和静态文件服务,同时在React、Vue和Angular中构建用户界面,帮助开发者快速掌握前后端分离的开发方法,实现高效、灵活的Web应用构建。
56 3
|
3月前
|
缓存 监控 前端开发
WEB前端三大主流框架:React、Vue与Angular
在Web前端开发中,React、Vue和Angular被誉为三大主流框架。它们各自具有独特的特点和优势,为开发者提供了丰富的工具和抽象,使得构建复杂的Web应用变得更加容易。
253 6
|
3月前
|
前端开发 Java Spring
Spring与Angular/React/Vue:当后端大佬遇上前端三杰,会擦出怎样的火花?一场技术的盛宴,你准备好了吗?
【8月更文挑战第31天】Spring框架与Angular、React、Vue等前端框架的集成是现代Web应用开发的核心。通过RESTful API、WebSocket及GraphQL等方式,Spring能与前端框架高效互动,提供快速且功能丰富的应用。RESTful API简单有效,适用于基本数据交互;WebSocket支持实时通信,适合聊天应用和数据监控;GraphQL则提供更精确的数据查询能力。开发者可根据需求选择合适的集成方式,提升用户体验和应用功能。
92 0
|
3月前
|
缓存 前端开发 JavaScript
前端框架选择指南:React vs Vue vs Angular
React、Vue与Angular是主流前端框架,各有千秋。React专注视图层,学习曲线平缓,生态丰富,适用于中大型项目;Vue简洁易学,模板直观,内置状态管理,适合中小项目及快速原型;Angular全栈框架,结构严谨,适合大型企业应用。React需手动处理状态管理,Vue提供完整CLI加速开发,Angular虽学习曲线陡峭但提供全套解决方案。性能方面,三者均利用虚拟DOM优化渲染。社区支持上,React最为庞大,Vue活跃度高,Angular有Google背书。选型应基于项目需求、团队技能及维护考量。
56 0
|
3月前
|
设计模式 JavaScript 前端开发
现代JavaScript框架比较:React、Vue和Angular
在现代Web开发中,JavaScript框架已成为开发高效、动态用户界面的关键工具。本文将深入比较三大主流框架:React、Vue和Angular。通过探讨它们的核心特性、优缺点和适用场景,帮助开发者根据项目需求选择最合适的框架。重点分析包括性能、学习曲线、社区支持和生态系统等方面,以便开发者能够做出明智的决策,优化开发流程并提升应用性能。
|
4月前
|
前端开发 JavaScript 数据管理
前端框架对比:React、Vue与Angular
【7月更文挑战第2天】React、Vue和Angular是前端三大框架,各有特色。React以组件化和虚拟DOM著称,适合大型SPA;Vue轻量且易用,适用于快速开发;Angular是全面解决方案,适合复杂应用,但学习成本高。选择取决于项目需求和团队技能。
|
6月前
|
前端开发 JavaScript 开发者
【专栏:HTML与CSS前端技术趋势篇】前端框架(React/Vue/Angular)与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发,通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合,使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展,掌握新工具,提升开发效能。
106 11