前端主流技术栈: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并没有谁比谁好,或者是谁比谁差那么一说,应该是各有千秋。所以在工作中技术选型,还是从多方考虑。三者间的对比远不止于此。

你可能感兴趣的:(Vue,angular,React,reactjs,vue.js,es6,前端,angular2)