关于对前端三大框架的看法你了解多少？

写本文的原因

最近公司的一个实习生来问我，三大框架有什么区别我竟一时语塞，随后便敷衍了几句。 虽然都有用过但是并没有仔细分析三大框架的不同点以及它们的设计思路。 最近忙很久没有写文章了, 刚好又在学习Vue源码, 那么我从Vue出发来分析一下这三个框架到底有什么区别吧。 相信大家一定听过以下的一些话：

• Angular学习成本真TMD高！
• Vue上手起来真简单！做起东西来真是快！
• React怎么那么难啊！
• React用起来比vue angluar灵活太多了！
• 等等…

文章没有任何代码简单的从各个框架的特点以及开发模式进行分析， 相信看完就能理解上面那些吐槽了。

从Vue官网简介开始

首先我们看看官网对于Vue的定义

这里重点两个词: 渐进式框架 、自底向上。是不是不好理解？ 如果不了解各个框架的特点是不好理解这几个词代表的含义, 通过分析各个框架分析我们能更深入的理解它们的含义。

Angular

我们先看一下官网的api列表， 是不是感觉有贼多的东西在里面？

特点: 区别于vue和react， Angular是综合框架开发平台, 更加关注的是项目应用, 而不是光解决一个视图渲染, 几乎把所有的需求都放入框架内部(包括动画) 用户需要什么可以直接用它定义好的方法进行使用（什么我都准备好了你直接用就行）。

开发模式: 由于框架一开始就集成了大多数业务需求, 所以开发模式是自上而下的, 直接拿里面的api进行使用。

编写规范: 有强规范必须按照提供的方法来写, 并且有依赖注入严格体系在里面。同时又有新的业务场景功能加入, 所以经常要用最新的JS和TS超集来开发（这也是学习成本高的点之一）。

总结: 由于Angular内部一开始就大集成了很多功能, 所以有很多大型项目都使用这个框架, 并且框架每次更新迭代都会加入一些功能和特点, 导致学习成本也会越来越高, 这也是我们常说的Angle学习起来很麻烦。

React

我们看以下官网对React介绍

发现有什么特点吗？ 没错官网对于React的定义是一个库，而非一个框架！

特点： React功能只有一个点, 那就是把数据渲染到页面。 所以它不称自己为框架， 因为它不提供中央管理（redux）以及路由（react-router）等框架常用的功能模块。 类似于redux react-router这些都是第三方进行支持的。

大家可以看react官网中是没有 redux 以及react-router的相关内容。

开发模式： 由于react只提供了视图处理方案，其他的需求例如中央状态管理、路由什么的都需要自己去看第三方插件进行配置（这也是有人觉得react比较难的点之一）。

编写规范：由于React编写没有强规范， 其实每一个组件的本质就是一个类或者函数，自己想怎么写就怎么写（所以人们都说react灵活性强）。 唯一特殊点就是在编写dom的时候要使用react的语法。

Vue

特点： 一个核心就是用户界面View层, 主要关心怎么把数据渲染到视图中。但同时也可以选择性集成其他功能，例如中央状态管理vuex，路由vue-router。

开发模式： 从它可以进行选择性集成微型库（Micro libs）例如vuex vue-router的特点，在结合官网的说明这里就能理解了什么是渐近式框架和自下而上这些词了。Vue基础只给你一个视图库，如果你需要更多功能也行你自己选择需要的功能进行集成进来。 你可以从最简单的开始，当熟悉了Vue的开发模式后需要哪个功能再去学习也不迟。

vue对比React和Angular: Vue是最后一个出来的框架， 尤大借鉴了angular以及react两者的特点并且加入了自己的想法， 区别于Angular框架vue不需要的功能可以不集成进来， 又不同于React只单单提供一个视图库，需要其他功能还需要第三方进行支持。 vue可以进行选择性集成。它的中心思想是： 先处理好视图，如果需要路由等其他功能可以之后进行集成，渐进的处理后续的工作。 这就是为什么称Vue是渐进式框架的原因。

总结

也不知为啥， 现在国内一些论坛上都觉得用Vue做的项目很辣鸡，技术水平不高。
突然也想起刚入行时候经理让我学Vue， 大概学习了一个星期就开始上手项目。 其实现在很多公司使用Vue来做项目也很符合他们的情况， 因为国内做项目大部分时间都是很紧的，必须有一个上手简单学习成本低并且有规范的框架供大家一起使用。 也并不是说其他框架不好， 像大型应用使用angular也挺好， 如果JS功底扎实的话用React来做项目会感觉没有框架的束缚写起来更加的得心应手。 所有每个框架有每个框架的特点和对应的场景， 不考虑现实情况下的胡乱鄙视都是耍流氓~

以上就是本文对三大框架做的一些总结， 希望能帮助到大家~