資料繫結

1. Angular和Vue的雙向資料繫結

Angular雙向資料繫結原理

• 從UI到資料：UI事件，ajax請求，timeout等。
• 從資料到UI：髒檢查

Vue雙向資料繫結原理

• 監聽UI事件
• 為每個用到相同vm.data的地方新增監聽器，當vm.data資料改變時，將通知這一組watcher呼叫其update方法實現vm.data到DOM的更新，關鍵是在在Object.defineProperty中重寫setter和getter。

兩種繫結原理優勢分析：

Vue的setter和getter每次都要修改DOM結構，效能影響較大，而Angular會將批量操作延遲到一次更新，效能相對較好。

Angular中當watcher越來越多時會變得非常慢，當在一個watcher中觸發另一個數據的更新髒檢查可能要執行多次，嚴重影響效能。而Vue中不存在這個問題，Vue只追蹤依賴，資料的變化更新是獨立的。

Angular和Vue都是MVVM模型，都是通過類似模板的語法渲染DOM。

2. React的單向資料流

React推崇函數語言程式設計，給定原始的介面，通過施加變化推匯出另一個變化從而引發介面更新。

檢視渲染

1. React虛擬DOM

構建虛擬DOM樹，當狀態發生變化時更新虛擬DOM樹，為真實DOM打補丁即可。虛擬DOM提供函式式的方法描述檢視，每次更新都會渲染整個應用，React支援伺服器端渲染，因此，在超大量首屏渲染速度上有優勢

2. Vue

Vue採用依賴追蹤，變了多少就修改多少。當資料量較大且變化的資料量較小時，Vue速度更快，React的虛擬DOM需要的計算時間可能相對大一些。

Angular

Angular的髒檢查和React的虛擬DOM都是進行全域性性的檢查對比資料變化，進而對真實DOM進行修改，個人認為渲染效能差距不大，Angular2和React都支援伺服器端渲染。

前景

這幾個框架基本都能應該市面上的需求，只是區別在於可優化性及對開發體驗的優化，例如vue的track-by和react的shouldComponentUpdate等，然而隨著瀏覽器和手機效能的提升，框架本身的差距會越來越小，因此更多的優化點還是要從圖片載入，合理利用快取等其他方面入手。