三大前端框架对比（慕课网学习记录）

12.29学习记录

一、3-1 前端框架的分析

What

框架中的框就是“约束”，架就是“支撑”，框架会控制我们书写代码时的结构、依赖关系以及交互关系。简单点来说就是我们按照框架的要求来写业务，而与业务无关的一些内容由框架完成，提高开发效率。

Why

原生JS搞不定了（主要不是技术问题，而是成本、效率问题）。

How

通过实战开发学会框架的使用

二、3-2 前端框架要解决的问题

传统的原生开发方式的不足

1. 代码层面问题
2. 效率问题
3. 多页应用问题

代码层面问题

1. 缺失规范，代码混乱 -> 结构化开发
2. 缺少限制，容易冲突 -> 独立文件，独立作用域
3. 缺少支撑，能力要求高 -> 提供支持，只关注业务

效率问题

1. 关注所有流程 -> 关注业务
2. 团队效率低 -> 并行开发
3. 测试效率低 -> 模块测试，自动化测试

多页应用的问题

1. 路由体验问题（多次请求，时间长，用户体验不好） -> 使用单页路由
2. 无页面切换效果 -> 可以添加过程动画
3. 浪费服务器资源 -> 减少服务器请求

框架开发的不足

1. 兼容性问题，SEO不好
2. 有场景要求，开发自由度降低
3. 黑盒开发，框架本身有出错的风险
4. 有学习成本

三、3-3 三大框架对比

Angular

1. 背景：2009年发布，Google
2. 主要版本：1.x, 2.x, 4.x, 5.x(beta)
3. 基于html的大而全的MVC框架（对js和css的关注较少）

React

1. 背景：2013年5月开源，Facebook
2. 最新版本：16.x
3. 基于js的视图层框架（可以把html、css都转换到js里来处理；视图层框架指只关注页面的显示，而不像Angular的MVC框架（数据也在页面中处理））

Vue

1. 背景：2014年2月开源，尤雨溪，现加入阿里Weex团队
2. 主要版本：0.1x，1.x，2.x
3. 基于html的视图层框架

框架对比

	Angular	React	Vue
组织方式	MVC	模块化	模块化
数据绑定	双向绑定	单向绑定	双向绑定
模版能力	强大	自由	简洁
自由度	较小	大	较大
路由	静态路由	动态路由	动态路由

其他维度

	Angular	React	Vue
背景	Google	Facebook	阿里巴巴
文档	英文	英文	多语言
上手难度	较高	较高	一般
App方案	Ionic	RN	Weex

适用场景

1. Angular：后端开发人员构建CURD类型应用
2. React：前端开发人员构建复杂的Web应用
3. Vue：前端开发人员快速构建Web应用