前端框架angular,angularJS,React,Vue对比

 

1、angular,angularJS,React,Vue对比

 

  React AngularJS Angular Vue
时间 13年 09年 16年 尤雨溪于 2014 年创建了这个框架
介绍 用于构建用户界面的 JavaScript 库 由Misko Hevery 等人创建,后为Google所收购。 Angular 是一个应用设计框架与开发平台,用于创建高效、复杂、精致的单页面应用。 渐进式 JavaScript 框架
官网 https://reactjs.org/ https://angularjs.org/ https://angular.cn/ https://cn.vuejs.org/
特点

一切都是JavaScript;

依赖Virtual DOM;

React Native 支持跨多平台开发;

MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入 一套框架,多种平台 移动端 & 桌面端

组件间强制单向数据流;

DOM模板;

体积小;

基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易;

路由库和状态管理库都是由官方维护支持且与核心库同步更新的;

所有的数据都是独立触发的。

优势

更丰富的生态系统;

更适合大型应用和更好的可测试性Web端和移动端原生APP通吃更大的生态系统

比较适合做管理系统;

横跨所有平台;

静态类型检查在大规模的应用中非常有用

渐进式构建能力;

模板和渲染函数的弹性选择简单的语法和项目配置更快的渲染速度和更小的体积

劣势

所有的组件的渲染功能都依靠 JSX;

路由库和状态管理由社区管理;

不适合单独做一个完整的框架

性能较差(脏检查);

体积最大;

不支持低端浏览器;

首次加载慢;

体积较大;

学习曲线是非常陡峭;

不支持低端浏览器;

只聚焦视图层;

适用场景

动态创建和交互式 UI 场景较多的场景;

灵活性更高;

原生体验要求更高的场景;

中型管理系统; 适用在复杂、重大项目中。它有自己的一套规则,写出来的项目结构比较清晰,便于大型项目的维护迭代

轻量级;

快速上手:语法简单,配置简单;

一次编写,支持多种小程序发布;

配套

Mobx-状态管理

Flux

Redux

JQuery

 

VueX 状态管理

Vue-Router 路由

Vue-Cli 脚手架

Vue-Loader

对知识体

系的要求

HTML

JSX(XML 语法)

ES2015

Webpack/Gulp

HTML

CSS

JavaScript

HTML

TypeScript

Webpack/Gulp

HTML

CSS

JavaScript

Webpack/Gulp

 

2、Vue.js与AngularJS的对比

相同点:

1)都支持指令:内置指令和自定义指令。

2)都支持过滤器:内置过滤器和自定义过滤器。

3)都支持双向数据绑定。

4)都不支持低端浏览器。

不同点:

1)AngularJS的学习成本高,比如增加了Dependency Injection特性,而Vue.js本身提供的API都比较简单、直观。

2)在性能上,AngularJS依赖对数据做脏检查,所以Watcher越多越慢。

3)Vue.js使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。对于庞大的应用来说,这个优化差异还是比较明显的。

 

3、Vue.js与React的区别

相同点:

1)React采用特殊的JSX语法,Vue.js在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。

2)中心思想相同:一切都是组件,组件实例之间可以嵌套。

3)都提供合理的钩子函数,可以让开发者定制化地去处理需求。

4)都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。

5)在组件开发中都支持mixins的特性。

不同点:

1)React依赖Virtual DOM,而Vue.js使用的是DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。

2)Vue.js在模板中提供了指令、过滤器等,可以非常方便,快捷地操作DOM。

 

4、目前一些前端框架的首次渲染时间

(首次渲染越快,到可以进行操作的时间越短,应用的用户体验就越好。)

详见 Lighthouse 评分指南(https://url.leanapp.cn/3JE8dVF)

 

前端框架angular,angularJS,React,Vue对比

 

 

5、技术文档汇总

腾讯:https://cloud.tencent.com/

 

6、参考资料

Vue和其他技术框架的对比:https://cn.vuejs.org/v2/guide/comparison.html

前端测评:https://blog.csdn.net/EAPxUO/article/details/89488671

web前端技术框架选型参考:https://blog.csdn.net/hbwang_716/article/details/81776208

Vue和React对比:https://segmentfault.com/a/1190000020722329

React和Vue应该如何选择:https://www.jianshu.com/p/329c030e379c