前端主流技术栈：vue和react、angular的区别是什么

前端技术发展很快，近几年出现了很多前端技术栈，但是主流技术栈，还是以react、vue、angular为主。各有各自的优势，又有自己的不同，我们就来对比一下这三大技术栈。

	react	vue	angular
历史	由facebook团队发布并且维护当前已经更新到16.8或者更新版本，与之前版本有来较大的区别，增加了新的功能，但是开发者无感知。react被描述为是一个构建用户界面的javascript库。被一些大公司所青睐，例如：arbin等	由尤雨溪团队维护。当前vue3.0版本呼之欲出。与之前版本却别较大，虽然做到了向下兼容，但是开发者在开发过程中和重新学习一种技术栈区别不大。被描述为响应式前端框架。	由google团队维护，angular.js与之后的anglar版本区别较大，当前angular2+的版本更新较快。被描述为超级厉害的mvvm javacsript框架。
模版	我们知道react打破了长期以来的最佳实践，使用jsx语法，将模版与逻辑合并，因为模版与逻辑的分离是技术的分离，而不是关注的分离。认为组件是可被复用的，可被测试的，可被组合的。JSX 对于开发来说是一个很大的优势，因为代码写在同一个地方，可以在代码完成和编译时更好地检查工作成果。当你在 JSX 中输入错误时，React 将不会编译，并打印输出错误的行号。jsx意味着一切都是JavaScript。	vue是具有单个文件组件。脚本，样式，模版写在一个文件夹中。Vue 不会显示不规范 HTML 的语法错误。vue当然也可以使用jsx语法，但是需要安装插件 babel-plugin-transform-vue-jsx。	Angular 模板使用特殊的 Angular 语法（比如 ngIf 或 ngFor）来增强 HTML。Angular 会迫使你学习angular特有的语法。
框架和库	react相对比较灵活。它的库可以和各种包搭配。在npm上有大量的包用于开发。然后灵活性越大，也就意味着责任越大。React 没有规则和有限的指导。每个项目都需要决定架构，而且事情可能更容易出错。	vue和React在这方面很相似，也是一个库，在npm上也有大量的包，而且在社区有大量的插件可以用。开发更加轻松容易。	Angular 是一个框架而不是一个库，因为它提供了关于如何构建应用程序的强有力的约束，并且还提供了更多开箱即用的功能。Angular 是一个 “完整的解决方案” - 功能齐全，你可以愉快的开始开发。你不需要研究库，路由解决方案或类似的东西 - 你只要开始工作就好了。
状态管理和数据绑定	我们知道，React是单一数据流。那么react也常常会和redux结合使用，构建用户界面很困难，因为处处都有状态 - 随着时间的推移而变化的数据带来了复杂性。定义的状态工作流程对于应用程序的增长和复杂性有很大的帮助。redux的三原则是，单一数据流。状态只读，使用纯函数来修改state。整个应用程序的状态存储在单个 store 的状态树中。这有助于调试应用程序，一些功能更容易实现。状态是只读的，只能通过 action 来改变，以避免竞争条件（这也有助于调试）。编写 Reducer 来指定如何通过 action 来转换 state。	其实在vue中也可以使用redux，但是vue提供了vuex，作为自己的解决方案。Vue 也支持双向绑定，默认为单向绑定，数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。	在这方面angular和vue有很大的相似度，也是双向绑定。当UI被更新时，Angular 的双向绑定改变 model 状态。
性能	React 为 43k，采用虚拟dom来做性能方面的优化。还可以更具compontShouldUpdate来手动更新视图。支持服务端渲染next.js	Vue 为 23K。同样采用了虚拟dom来更新视图。可以使用keep-alive，内置组件做一个组件的缓存。支持服务端渲染nuxt.js	Angular 框架非常臃肿。gzip 文件大小为 143k。支持服务端渲染angular Universal。
通用与原生app	对于原生app的支持，有react-native	只能通过webview来实现混合开发	应用原生的nativeScript和icon框架实现原生app的开发。
组件与模块	一个 React 应用就是构建在 React 组件之上的。 组件有两个核心概念：props,state。 一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。 传统的 MVC 是将模板放在其他地方，比如 script 标签或者模板文件，再在 JS 中通过某种手段引用模板。按这种思路，想想多少次我们面对四处分散的模板片段不知所措？纠结模板引擎，纠结模板存放位置，纠结如何引用模板。 React 认为组件才是王道，而组件是和模板紧密关联的，组件模板和组件逻辑分离让问题复杂化了。所以就有了 JSX 这种语法，就是为了把 HTML 模板直接嵌入到 JS 代码里面，这样就做到了模板和组件关联，但是 JS 不支持这种包含 HTML 的语法，所以需要通过工具将 JSX 编译输出成 JS 代码才能使用（可以进行跨平台开发的依据，通过不同的解释器解释成不同平台上运行的代码，由此可以有RN和React开发桌面客户端）。	Vue中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。	Angular1使用依赖注入来解决模块之间的依赖问题，模块几乎都依赖于注入容器以及其他相关功能。不是异步加载的，根据依赖列出第一次加载所需的所有依赖。 可以配合类似于Require.js来实现异步加载，懒加载（按需加载）则是借助于 ocLazyLoad 方式的解决方案，但是理想情况下应该是本地框架会更易懂。 Angular2使用ES6的module来定义模块，也考虑了动态加载的需求。

React、Vue、Angular并没有谁比谁好，或者是谁比谁差那么一说，应该是各有千秋。所以在工作中技术选型，还是从多方考虑。三者间的对比远不止于此。