近幾年前端的技術發展很快，細分下來，主要可以分成四個方面：

      1.開發語言技術，主要是ES6&7，coffeescript，typescript等；

      2.開發框架，如Angular，React,Vue.js，Angular2等；

      3.開發工具的豐富和前端工程化，像Grunt，Gulp，Webpack，npm，eslint，mocha這些技術；

      4.前端開發范圍的擴展，如服務端的nodejs,express,koa,meteor,GraphQL;移動端和跨平臺的PhoneGap,ionic,ReactNative，Weex;計算機圖形學和3維建模領域的WebGL(three.js等)；可視化與數據分析領域的d3.js等；包括瀏覽器不斷開放的更多新特性和接口比如svg,canvas,藍牙，電池，本地存儲，service worker，Houdini等新的API能力，以及像WASM這樣的底層優化技術；

就開發框架這塊，Angular(1&2),React,Vue目前占據著主流地位而且會相持比較長的一段時間，所以這里對比一下這三門技術，以便之后的技術選型。

一、數據流

數據綁定

Angular 使用雙向綁定即：界面的操作能實時反映到數據，數據的變更能實時展現到界面。

實現原理：

$scope變量中使用臟值檢查來實現。像ember.js是基于setter，getter的觀測機制，

$scope.$watch函數，監視一個變量的變化。函數有三參數，”要觀察什么”，”在變化時要發生什么”,以及你要監視的是一個變量還是一個對象。

使用ng-model時，你可以使用雙向數據綁定。

使用$scope.$watch（視圖到模型）以及$scope.$apply（模型到視圖），還有$scope.$digest

調用$scope.$watch時只為它傳遞了一個參數，無論作用域中的什么東西發生了變化，這個函數都會被調用。在ng-model中，這個函數被用來檢查模型和視圖有沒有同步，如果沒有同步，它將會使用新值來更新模型數據。

雙向綁定的三個重要方法：

$scope.$apply()$scope.$digest()$scope.$watch()

在AngularJS雙向綁定中，有2個很重要的概念叫做dirty check，digest loop，dirty check（臟檢測）是用來檢查綁定的scope中的對象的狀態的，例如，在js里創建了一個對象，并且把這個對象綁定在scope下，這樣這個對象就處于digest loop中，loop通過遍歷這些對象來發現他們是否改變，如果改變就會調用相應的處理方法來實現雙向綁定

Vue 也支持雙向綁定，默認為單向綁定，數據從父組件單向傳給子組件。在大型應用中使用單向綁定讓數據流易于理解。

臟檢測的利弊

和ember.js等技術的getter/setter觀測機制相比（優）：

getter/setter當每次對DOM產生變更，它都要修改DOM樹的結構，性能影響大，Angular會把批量操作延時到一次更新，性能相對較好。