前端开发实用比较，一篇文章告诉你到底是用Vue还是用Angular45？

Posted 2021-04-08 web前端网页设计

从Angular2时代开始，前端开发就逐渐开始用用Angular了，当时全国都没什么人敢碰Angular2，多数开发者就靠着啃它源代码中的注释，熟悉了Angular2的用法，并在实用中，还给Angular2团队提交bug。

但是现在，Vue的出现，让很多还没接触Angular多久的开发者开始纠结，这两个到底用哪个好？

用Vue还是用Angular?

因此，这里提供给大家最实用的比较，帮助大家在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，其中的苦，用过都知道。

---

学习最新零基础到企业级框架全套前端课程，私聊李老师微信：aila090422