[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)