MVVM初接觸

最近項目需求接觸VUE框架，不用操做DOM的的感受實在酸爽。

Vue (讀音 /vjuː/，相似於 view) 是一套用於構建用戶界面的漸進式框架。與其它大型框架不一樣的是，Vue 被設計爲能夠自底向上逐層應用。Vue 的核心庫只關注視圖層，不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與現代化的工具鏈以及各類支持類庫結合使用時，Vue 也徹底可以爲複雜的單頁應用提供驅動。

談到VUE天然離不開MVVM框架，MVVM是MVC的一個變種模式，因此提到MVVM框架就繞不開MVC，上圖

• 視圖：管理做爲位圖展現到屏幕上的圖形和文字輸出;
• 控制器：翻譯用戶的輸入並依照用戶的輸入操做模型和視圖;
• 模型：管理應用的行爲和數據，響應數據請求（常常來自視圖）和更新狀態的指令（常常來自控制器）；

MVC框架將前端頁面分爲View（頁面渲染），Controller(控件）和Model（業務邏輯），視圖層的變化傳入控件，經過控件改變視圖的數據變化。整個過程是單向的，僅能實現模型數據變化觸發視圖更新，而且視圖和業務邏輯之間耦合過於緊密。

MVVC框架能夠作到數據和視圖的分離，經過ViewModel驅動View和反向驅動Model，實現雙向綁定，模型數據變化觸發視圖更新，而且能夠實現視圖操做觸發模型數據更新。原理是經過DOM Listener和Data Bindings兩個對象實現的。

用戶只須要完成視圖模板，完成數據綁定和事件綁定後，在ViewModel進行數據處理，事件觸發會影響View中的數據更新，因此操做數據就完成了對視圖的操做。

使用VUE的用戶需求整個處理流程概要以下：

• 當用戶操做了界面，須要進行業務處理都會經過網絡請求請求後端的服務器，此時請求會被後端的App.js監聽到；
• App.js是整個項目的入口模塊，一切的請求先要進入此到處理，因爲app。js沒有路由的分發處理功能，須要調用路由分發模塊進行路由的分發處理；
• 路由分發模塊只負責路由分發處理，不負責具體業務的邏輯處理，涉及到邏輯處理的交由Controller模塊進行處理；
• Controller只進行業務處理，不負責數據的CRUD操做，關於數據的操做調用Model層；
• 請求到達model層，只負責數據的增刪改查操做；

上圖來自網絡

MVVM的核心以下：

• 組件機制：供組件的定義、繼承、生命週期、組件間通訊機制；
• 數據存取器： 經過Object.defineProperty()定義，完成對數據的監聽；
• 視圖引擎：幫助開發者完成DOM操做