[toc]
## Angular React 和 Vue的比較
### 1)數據流
**數據綁定**
- Angular 使用雙向綁定即:界面的操作能實時反映到數據,數據的變更能實時展現到界面。
- Vue 也支持雙向綁定,**默認為單向綁定**,數據從父組件單向傳給子組件。在大型應用中使用單向綁定讓數據流易于理解。
Angular和Vue.js比較:
- Vue.js 有更好的性能,并且非常非常容易優化,因為它不使用臟檢查。Angular,當 watcher 越來越多時會變得越來越慢,因為作用域內的每一次變化,所有 watcher 都要重新計算。
- Vue.js 使用基于依賴追蹤的觀察系統并且異步列隊更新,所有的數據變化都是獨立地觸發,除非它們之間有明確的依賴關系。唯一需要做的優化是在 v-for 上使用 track-by。
**React-單向數據流**
- React推崇的是函數式編程和單向數據流:給定原始界面(或數據),施加一個變化,就能推導出另外一個狀態(界面或者數據的更新)。
- React和Vue都可以配合Redux來管理狀態數據。
### 2)模塊化與組件化
**Vue**
Vue中指令和組件分得更清晰。指令只封裝 DOM 操作,而組件代表一個自給自足的獨立單元 —— 有自己的視圖和數據邏輯**。在 Angular1 中兩者有不少相混的地方。
**React**
一個 React 應用就是構建在 React 組件之上的。
組件有兩個核心概念:props,state。
一個組件就是通過這兩個屬性的值在 render 方法里面生成這個組件對應的 HTML 結構。
React 認為組件才是王道,而組件是和模板緊密關聯的,組件模板和組件邏輯分離讓問題復雜化了。所以就有了 JSX 這種語法,就是為了把 HTML 模板直接嵌入到 JS 代碼里面,這樣就做到了模板和組件關聯,但是 JS 不支持這種包含 HTML 的語法,所以需要通過工具將 JSX 編譯輸出成 JS 代碼才能使用
### 3)語法與代碼風格
React,Vue,Angular2都支持ES6,Angular2官方擁抱了TypeScript這種 JavaScript 風格。
React 以 JavaScript 為中心,Angular 2 依然保留以 HTML 為中心。Angular 2 將 “JS” 嵌入 HTML。React 將 “HTML” 嵌入 JS。Angular 2 沿用了 Angular 1 試圖讓 HTML 更強大的方式。
React 推薦的做法是 JSX + inline style,也就是把 HTML 和 CSS 全都整進 JavaScript 了。Vue 的默認 API 是以簡單易上手為目標,但是進階之后推薦的是使用 webpack + vue-loader 的單文件組件格式(template,script,style寫在一個vue文件里作為一個組件)
******
**參考文章**
- [被誤解的 MVC 和被神化的 MVVM](http://blog.devtang.com/2015/11/02/mvc-and-mvvm/)
- [gulp和webpack究竟有什么區別?](https://segmentfault.com/q/1010000008058766/a-1020000008058892)
- [gulp與webpack的區別](http://www.cnblogs.com/lovesong/p/6413546.html)
- [前端學習總結(二十三)——前端框架天下三分:Angular React 和 Vue的比較](http://blog.csdn.net/haoshidai/article/details/52346865)
- 說明
- CSS與HTML
- BFC的特性及其常見應用
- CSS深入理解之margin
- CSS深入理解之line-height
- CSS盒模型相關知識
- CSS知識總結
- HTML知識總結
- 三欄布局五種方式
- JavaScript內置對象
- 1.循環
- 2.數組方法對比
- 3.字符串實用常操紀要
- JavaScript核心
- var、let、const定義變量
- this 的指向問題詳解
- 箭頭函數
- ES6部分知識歸納
- ES6的Class
- Promise和Async/await
- 面向對象的概念及JS中的表現
- 創建對象的九種方式
- JS的繼承
- 閉包總結
- 構造函數與作用域
- 原型與原型鏈
- 函數的四種調用模式
- apply、call、bind詳解
- JavaScript應用
- 1.JavaScript實現深拷貝與淺拷貝
- 2.函數防抖與節流
- 3.無阻塞腳本加載技術
- DOM
- 如何寫出高性能DOM?
- 事件探秘
- 事件委托
- 操作DOM常用API詳解
- 重排和重繪
- 運行機制與V8
- 瀏覽器的線程和進程
- Vue.js
- Vue.js知識點總結
- Vue-Router知識點總結
- 父子組件之間通信的十種方式
- 優化首屏加載
- 關于Vuex
- 前端路由原理及實現
- 在Vue.js編寫更好的v-for循環的6種技巧
- 12個Vue.js開發技巧和竅門
- 網絡協議
- HTTP緩存機制
- UDP協議
- TCP協議
- HTTPS協議
- HTTPS的背景知識、協議的需求、設計的難點
- HTTPS與HTTP的區別
- 框架與架構
- MVC、MVP、MVVM
- Gulp與Webpack的區別
- Angular React 和 Vue的比較
- 虛擬DOM和實際的DOM有何不同?
- 架構問題
- 工程化
- npm link命令
- npm scripts 使用指南
- 前端工程簡史
- 常見的構建工具及其對比
- Webpack基本配置與概念
- 設計模式
- 工廠設計模式
- 單例設計模式
- 適配器模式
- 裝飾器模式