三大前端框架對比(慕課網學習記錄)
阿新 • • 發佈:2019-01-06
12.29學習記錄
一、3-1 前端框架的分析
What
框架中的框就是“約束”,架就是“支撐”,框架會控制我們書寫程式碼時的結構、依賴關係以及互動關係。簡單點來說就是我們按照框架的要求來寫業務,而與業務無關的一些內容由框架完成,提高開發效率。
Why
原生JS搞不定了(主要不是技術問題,而是成本、效率問題)。
How
通過實戰開發學會框架的使用
二、3-2 前端框架要解決的問題
傳統的原生開發方式的不足
- 程式碼層面問題
- 效率問題
- 多頁應用問題
程式碼層面問題
- 缺失規範,程式碼混亂 -> 結構化開發
- 缺少限制,容易衝突 -> 獨立檔案,獨立作用域
- 缺少支撐,能力要求高 -> 提供支援,只關注業務
效率問題
- 關注所有流程 -> 關注業務
- 團隊效率低 -> 並行開發
- 測試效率低 -> 模組測試,自動化測試
多頁應用的問題
- 路由體驗問題(多次請求,時間長,使用者體驗不好) -> 使用單頁路由
- 無頁面切換效果 -> 可以新增過程動畫
- 浪費伺服器資源 -> 減少伺服器請求
框架開發的不足
- 相容性問題,SEO不好
- 有場景要求,開發自由度降低
- 黑盒開發,框架本身有出錯的風險
- 有學習成本
三、3-3 三大框架對比
Angular
- 背景:2009年釋出,Google
- 主要版本:1.x, 2.x, 4.x, 5.x(beta)
- 基於html的大而全的MVC框架(對js和css的關注較少)
React
- 背景:2013年5月開源,Facebook
- 最新版本:16.x
- 基於js的檢視層框架(可以把html、css都轉換到js裡來處理;檢視層框架指只關注頁面的顯示,而不像Angular的MVC框架(資料也在頁面中處理))
Vue
- 背景:2014年2月開源,尤雨溪,現加入阿里Weex團隊
- 主要版本:0.1x,1.x,2.x
- 基於html的檢視層框架
框架對比
Angular | React | Vue | |
---|---|---|---|
組織方式 | MVC | 模組化 | 模組化 |
資料繫結 | 雙向繫結 | 單向繫結 | 雙向繫結 |
模版能力 | 強大 | 自由 | 簡潔 |
自由度 | 較小 | 大 | 較大 |
路由 | 靜態路由 | 動態路由 | 動態路由 |
其他維度
Angular | React | Vue | |
---|---|---|---|
背景 | 阿里巴巴 | ||
文件 | 英文 | 英文 | 多語言 |
上手難度 | 較高 | 較高 | 一般 |
App方案 | Ionic | RN | Weex |
適用場景
- Angular:後端開發人員構建CURD型別應用
- React:前端開發人員構建複雜的Web應用
- Vue:前端開發人員快速構建Web應用