最近專案需求接觸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中的資料更新，所以運算元據就完成了對檢視的操作。
- 當使用者操作了介面，需要進行業務處理都會通過網路請求請求後端的伺服器，此時請求會被後端的App.js監聽到；
- App.js是整個專案的入口模組，一切的請求先要進入此處處理，由於app。js沒有路由的分發處理功能，需要呼叫路由分發模組進行路由的分發處理；
- 路由分發模組只負責路由分發處理，不負責具體業務的邏輯處理，涉及到邏輯處理的交由Controller模組進行處理；
- Controller只進行業務處理，不負責資料的CRUD操作，關於資料的操作呼叫Model層；
- 請求到達model層，只負責資料的增刪改查操作；
上圖來自網路
MVVM的核心如下：
- 元件機制：供元件的定義、繼承、生命週期、元件間通訊機制；
- 資料存取器： 通過
Object.defineProperty()定義，完成對資料的監聽； - 檢視引擎：幫助開發者完成DOM操作