經過幾天的研究，發現學習框架的底層技術，收穫頗豐，相比只學習框架的使用要來的合算；如果工作急需，快速上手應用，掌握如何使用短期內更加高效；如果有較多的時間來系統學習，建議研究一下框架的等層技術、原理。

Vue、React、Angular三大框架對比

1、Vue

Vue是尤雨溪編寫的一個構建資料驅動的Web介面的庫，準確來說不是一個框架，它聚焦在V（view）檢視層。

它有以下的特性：

1.輕量級的框架

2.雙向資料繫結

3.指令

4.外掛化

優點：

簡單：官方文件很清晰，比 Angular 簡單易學。
快速：非同步批處理方式更新 DOM。
組合：用解耦的、可複用的元件組合你的應用程式。
緊湊：
 
~18kb min+gzip，且無依賴。
強大：表示式 無需宣告依賴的可推導屬性 (computed properties)。
對模組友好：可以通過 NPM、Bower 或 Duo 安裝，不強迫你所有的程式碼都遵循 Angular 的各種規定，使用場景更加靈活。

缺點：

新生兒：Vue.js是一個新的專案，沒有angular那麼成熟。
影響度不是很大：google了一下，有關於Vue.js多樣性或者說豐富性少於其他一些有名的庫。
不支援IE8

2、React

React 起源於 Facebook 的內部專案，用來架設 Instagram 的網站， 並於 2013年 5 月開源。React 擁有較高的效能，程式碼邏輯非常簡單，越來越多的人已開始關注和使用它。

它有以下的特性：

1.宣告式設計：React採用聲明範式，可以輕鬆描述應用。

2.高效：React通過對DOM的模擬，最大限度地減少與DOM的互動。

3.靈活：React可以與已知的庫或框架很好地配合。

3、Angular

Angular是一款優秀的前端JS框架，已經被用於Google的多款產品當中。

它有以下的特性：

1.良好的應用程式結構

2.雙向資料繫結

3.指令

4.HTML模板

5.可嵌入、注入和測試

優點：

模板功能強大豐富，自帶了極其豐富的angular指令。
是一個比較完善的前端框架，包含服務，模板，資料雙向繫結，模組化，路由，過濾器，依賴注入等所有功能；
自定義指令，自定義指令後可以在專案中多次使用。
ng模組化比較大膽的引入了Java的一些東西（依賴注入），能夠很容易的寫出可複用的程式碼，對於敏捷開發的團隊來說非常有幫助。
angularjs是網際網路巨人谷歌開發，這也意味著他有一個堅實的基礎和社群支援。

缺點：
 


angular 入門很容易 但深入後概念很多, 學習中較難理解.
文件例子非常少, 官方的文件基本只寫了api, 一個例子都沒有, 很多時候具體怎麼用都是google來的, 或直接問misko,angular的作者.
對IE6/7 相容不算特別好, 就是可以用jQuery自己手寫程式碼解決一些.
指令的應用的最佳實踐教程少, angular其實很靈活, 如果不看一些作者的使用原則,很容易寫出 四不像的程式碼, 例如js中還是像jQuery的思想有很多dom操作.
DI 依賴注入 如果程式碼壓縮需要顯示宣告.

通過以上相比較，您更加傾向於學習哪一個呢？

正題：Vue的基本原理

1、建立虛擬DOM Tree，通過document.createDocumentFragment()，遍歷指定根節點內部節點，根據{{ prop }}、v-model等規則進行compile；
2、通過Object.defineProperty()進行資料變化攔截；
3、擷取到的資料變化，通過釋出者-訂閱者模式，觸發Watcher，從而改變虛擬DOM中的具體資料；
4、通過改變虛擬DOM元素值，從而改變最後渲染dom樹的值，完成雙向繫結

完成資料的雙向繫結在於Object.defineProperty()

                                                                        vue原理（二）