們在 2018 年分布了一篇比較 React 和 Angular 的文章，而在 2019 年，由于每個框架的快速版本迭代，我們將再次比較兩者以及市場上的新玩家 Vue.js，分享每個前端框架的優缺點，從而幫助開發者為產品開發中的每個單獨案例找到最適合他們開發需求的正確選擇。

之前我們發布了一篇文章，比較了 Angular 與 React。在該文中，我們展示了這兩個框架的優點和缺點，為特定目的的開發者建議在 2018 年該選擇哪個框架。那么，2019 年的前端生態中情況又是如何的呢？

JavaScript 框架在以非?？斓乃俣劝l展，意味著今天我們有快速版本更新的 Angular、React 和市場上的另一個玩家 Vue.js。

我們分析了全世界要求特定框架知識的開發職位，以 Indeed.com 作為數據來源，根據 60,000 多個職位得到了如下分布。

根據這些數據，我們決定分享每個前端框架的優缺點，幫助科技人員或工程師選擇最適合他們開發需求的前端框架。

Angular 的優缺點

Angular 是超火的 JavaScript MVVM 框架，創建于 2009 年，用來構建具有很強互動性的 Web 應用程序非常棒。

Angular 的優點：

• Angular 必須使用 TypeScript，而且對于 TypeScript 還有額外支持。
• Angular- 語言 - 服務，這使得組件外部的 HTML 模板文件可以智能化和自動補全。
• 新功能，例如基于 CLI 的 npm 庫生成 Angular 代碼，以及基于 Angular 開發 WebComponents。
• 詳細的文檔，使得個人開發者可以獲得所有必需的信息而無需詢問他的同事。然而，這需要更多的學習時間。
• 單向數據綁定，使應用程序能夠實現單一行為，從而最小化可能錯誤的風險。
• MVVM（Model-View-ViewModel）允許開發者使用同一組數據處理同一個應用程序塊。
• 與模塊中的組件和整體模塊化有關的依賴注入特性。
• 特別針對大型項目創建的結構和架構。

Angular 的缺點：

• 各種不同的結構（Injectables、Components、Pipes、Modules 等等）使得它與只有“Component（組件）”概念的 React 和 Vue.js 比起來更難學。
• 根據各種不同的基準，性能都相對更慢。另一方面，這很容易使用所謂的“ChangeDetectionStrategy”來解決?！癈hangeDetectionStrategy”幫助手動控制組件的渲染進程。

使用 Angular 的公司有：Microsoft、Autodesk、MacDonald’s、UPS、Cisco Solution Partner Program、AT&T、Apple、Adboe、GoPro、ProtonMail、Clarity Design Systemm、Upwork、Freelancer、Udemy、YouTube、Paypal、Nike、Google、Telegram、Weather、iStockphoto、AWS、Crunchbase。

React 的優缺點

React 是一個 JavaScript 庫，在 2013 年由 Facebook 開源，用于創建任何規模的現代單頁應用都很棒。

React 的優點：

• 由于它的簡潔設計，所以容易學習。使用 JSX（一種類似 HTML 的語法）來做模板，具有非常詳細的文檔。
• 開發者花費更多時間編寫現代 JavaScript，更少關注框架相關的代碼。
• 非?？?，React 的虛擬 DOM 實現和各種渲染優化。
• 強力支持服務端渲染，對于專注內容的應用程序來說是一個強力的框架。
• 一流的漸進型 Web 應用程序（PWA）支持，多虧了create-react-app應用生成器。
• 數據綁定是單向的，意味著不想要的副作用更少。
• Redux——最流行的用來管理 React 應用程序狀態的框架，容易學習和掌握。
• React 實現了函數式編程（FP）的概念，創建易于測試和高度可復用的代碼。
• 應用程序可以使用 Microsoft 的 TypeScript 或者 Facebook 的 Flow 實現類型安全，兩者都原生支持 JSX。
• 版本之間的遷移通常很簡單，Facebook 提供了“codemods”來自動化大部分遷移過程。
• 在 React 中學到的技術（通常直接）可以應用到 React Native 開發。

React 的缺點：

• React 是沒有主導意見的，開發者可以選擇最佳的開發方式。這可以通過強大的項目領導力和良好的流程解決。
• 社區關于在 React 中寫 CSS 的最佳方式存在分歧，分為傳統樣式表（CSS Modules）和 CSS-in-JS（例如 Emotion 和 Styled Components）。
• React 正遠離基于類的組件，這可能是更習慣面向對象編程（OOP）的開發者的一個障礙。
• （JSX）將模板與邏輯混合，對于一些開發者來說一開始可能會感到困惑。

使用 React 的公司有：Facebook、Instagram、Netflix、New York Times、Yahoo、Khan Academy、Whatsapp、Codecademy、Dropbox、Airbnb、Asana、Atlassian、Intercom、Microsoft、Slack、Stroybook 等等。

Vue.js 的優缺點

Vue.js 是一個 JavaScript 框架，發布于 2013 年，非常適合用于創建高適應性的用戶界面和復雜的單頁應用。

Vue.js 的優點：

• 強化了 HTML。這意味著 Vue.js 和 Angular 有許多相似的特性，而且這可以通過使用不同的組件幫助優化 HTML 塊。
• 詳細的文檔。Vue.js 有非常接地氣的文檔，可以加快開發者的學習曲線并節省更多時間使用基本的 HTML 和 JavaScript 知識來開發應用程序。
• 適應性。由于它與 Angular 和 React 在設計和架構上的相似性，所以可以快速從其它框架切換到 Vue.js。
• 非常棒的集成。Vue.js 可以用于構建單頁應用程序和應用程序中難度更高的 Web 界面。
• 最主要的是，更小的交互部件可以輕易集成到已有的基礎設施中，而不會給整個系統帶來負面效果。
• 大型擴展。Vue.js 可以幫助開發非常大型的可復用的模板，而且由于其簡單的結構而無需分配額外的時間。
• 文件非常小。Vue.js 只有 20KB 大小就可以保持它的速度和靈活性，相對于其他框架來說可以達到更好的性能。

Vue.js 的缺點：

• 缺少資源。Vue.js 相對于 React 或 Angular 來說市場份額還比較小，這意味著這個框架的知識分享還處在開始階段。
• 過度靈活性的風險。有時，Vue.js 遷移到超大型項目中會有一些問題，而且還沒有可能的解決方案，但肯定馬上會有解決方案的。

使用 Vue.js 的公司有：Xiaomi、Alibaba、WizzAir、EuroNews、Grammarly、Gitlab 和 Laracasts、Adobe、Behance、Codeship、Reuters。

結論

作為一名真正的工程師，選擇哪個框架并沒有實質性的區別，因為只需要花費一些時間來習慣新框架就可以了。在我們公司，我們主要在 React 和 Angular 領域發展專業知識，但也正在了解 Vue.js。每個框架都有它的優點和缺點，意味著產品開發中的每一個案例都應該有正確的選擇。

ngular

• 1，MVVM（Model）(View)(View-model)
• 2，模塊化（Module）控制器（Contoller）依賴注入：
• 3，雙向數據綁定：界面的操作能實時反映到數據，數據的變更能實時展現到界面。
• 4，指令(ng-click ng-bind ng-model ng-href ng-src ng-if/ng-show...)
• 5，服務Service($compile $filter $interval $timeout $http...)
• 6，路由(ng-Route原生路由),ui-router(路由組件)
• 7，Ajax封裝($http)

其中雙向數據綁定的實現使用了$scope變量的臟值檢測，使用$scope.$watch（視圖到模型），$scope.$apply(模型到視圖)檢測，內部調用的都是digest，當然也可以直接調用$scope.$digest進行臟檢查。值得注意的是當數據變化十分頻繁時，臟檢測對瀏覽器性能的消耗將會很大，官方注明的最大檢測臟值為2000個數據。

Vue

vue.js官網：是一套構建用戶界面的 漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。另一方面，Vue 完全有能力驅動采用單文件組件和 Vue 生態系統支持的庫開發的復雜單頁應用。

Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

• （1）模塊化，目前最熱的方式是在項目中直接使用ES6的模塊化，結合Webpack進行項目打包
• （2）組件化，創造單個component后綴為.vue的文件，包含template(html代碼)，script(es6代碼),style(css樣式)
• （3）雙向數據綁定：界面的操作能實時反映到數據，數據的變更能實時展現到界面。
• （4）指令(v-html v-bind v-model v-if/v-show...)
• （5）路由(vue-router)
• （6）vuex 數據共享
• （7）Ajax插件(vue-resource,axios)

vue非常小巧，壓縮后min源碼為72.9kb，gzip壓縮后只有25.11kb，想比Angular為144kb，可以自駕搭配使用需要的庫插件，類似路由插件(Vue-router)，Ajax插件(vue-resource,axios)等

Vue與 Angular 雙向數據綁定原理

angular.js ：臟值檢查

angular.js 是通過臟值檢測的方式比對數據是否有變更，來決定是否更新視圖，最簡單的方式就是通過 setInterval() 定時輪詢檢測數據變動，當然Google不會這么low，angular只有在指定的事件觸發時進入臟值檢測，大致如下：

• DOM事件，譬如用戶輸入文本，點擊按鈕等。( ng-click )
• XHR響應事件 ( $http )
• 瀏覽器Location變更事件 ( $location )
• Timer事件( $timeout , $interval )
• 執行 $digest() 或 $apply()

vue ：數據劫持

vue.js 則是采用數據劫持結合發布者-訂閱者模式的方式，通過Object.defineProperty()來劫持各個屬性的setter，getter，在數據變動時發布消息給訂閱者，觸發相應的監聽回調。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/definePropertydefineProperty

下面直接上代碼

首先當然是Hello World了

相比較來看，vue采用了json的數據格式進行dom和data的編寫，編寫風格更加靠進js的數據編碼格式，通俗易懂。

vue的雙向數據綁定

Angular的雙向數據綁定

vue雖然是一個輕量級的框架，提供的API確非常多，包括一些便捷的指令和屬性操作，一般vue是指令使用(v-)操作符，相比angularjs指令使用（ng-）。其中vue.js還支持指令的簡寫方式：

(1)事件click
<a v-on: click="fn"></a>
簡寫方式：
<a @click="fn"></a>
(2)屬性
<a v-bind: href="url"></a>
簡寫方式：
<a :href="url"></a>

vue.渲染列表

Angularjs渲染列表

vue的循環

angular和vue的渲染差不多

vue和Angular處理用戶輸入