什么是 MVVM
MVVM（Model-View-ViewModel）是一種軟件架構(gòu)設(shè)計模式疯特，由微軟 WPF（用于替代 WinForm楞抡，以前就是用這個技術(shù)開發(fā)桌面應(yīng)用程序的）和 Silverlight（類似于 Java Applet，簡單點說就是在瀏覽器上運行的 WPF） 的架構(gòu)師 Ken Cooper 和 Ted Peters 開發(fā)蛤肌，是一種簡化用戶界面的事件驅(qū)動編程方式酷誓。由 John Gossman（同樣也是 WPF 和 Silverlight 的架構(gòu)師）于 2005 年在他的博客上發(fā)表造锅。
MVVM 源自于經(jīng)典的 MVC（Model-View-Controller）模式（期間還演化出了 MVP（Model-View-Presenter） 模式）仙畦。MVVM 的核心是 ViewModel 層输涕，負責(zé)轉(zhuǎn)換 Model 中的數(shù)據(jù)對象來讓數(shù)據(jù)變得更容易管理和使用，其作用如下：
- 該層向上與視圖層進行雙向數(shù)據(jù)綁定
- 向下與 Model 層通過接口請求進行數(shù)據(jù)交互
MVVM 已經(jīng)相當(dāng)成熟了慨畸，主要運用但不僅僅在網(wǎng)絡(luò)應(yīng)用程序開發(fā)中莱坎。當(dāng)下流行的 MVVM 框架有 Vue.js，AngularJS 等寸士。
為什么要使用 MVVM
MVVM 模式和 MVC 模式一樣檐什，主要目的是分離視圖（View）和模型（Model），有幾大好處
- 低耦合： 視圖（View）可以獨立于 Model 變化和修改弱卡，一個 ViewModel 可以綁定到不同的 View 上乃正，當(dāng) View 變化的時候 Model 可以不變，當(dāng) Model 變化的時候 View 也可以不變婶博。
- 可復(fù)用： 你可以把一些視圖邏輯放在一個 ViewModel 里面瓮具，讓很多 View 重用這段視圖邏輯。
- 獨立開發(fā)： 開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel）凡人，設(shè)計人員可以專注于頁面設(shè)計名党。
- 可測試： 界面素來是比較難于測試的，而現(xiàn)在測試可以針對 ViewModel 來寫划栓。
MVVM 的組成部分
View
View 是視圖層兑巾，也就是用戶界面。前端主要由 HTML 和 CSS 來構(gòu)建忠荞，為了更方便地展現(xiàn) ViewModel 或者 Model 層的數(shù)據(jù)蒋歌，已經(jīng)產(chǎn)生了各種各樣的前后端模板語言，比如 FreeMarker委煤、Thymeleaf 等等堂油，各大 MVVM 框架如 Vue.js，AngularJS碧绞，EJS 等也都有自己用來構(gòu)建用戶界面的內(nèi)置模板語言府框。
Model
Model 是指數(shù)據(jù)模型，泛指后端進行的各種業(yè)務(wù)邏輯處理和數(shù)據(jù)操控讥邻，主要圍繞數(shù)據(jù)庫系統(tǒng)展開迫靖。這里的難點主要在于需要和前端約定統(tǒng)一的 接口規(guī)則
ViewModel
ViewModel 是由前端開發(fā)人員組織生成和維護的視圖數(shù)據(jù)層。在這一層兴使，前端開發(fā)者對從后端獲取的 Model 數(shù)據(jù)進行轉(zhuǎn)換處理系宜，做二次封裝，以生成符合 View 層使用預(yù)期的視圖數(shù)據(jù)模型发魄。
需要注意的是 ViewModel 所封裝出來的數(shù)據(jù)模型包括視圖的狀態(tài)和行為兩部分盹牧，而 Model 層的數(shù)據(jù)模型是只包含狀態(tài)的
- 比如頁面的這一塊展示什么俩垃，那一塊展示什么這些都屬于視圖狀態(tài)（展示）
- 頁面加載進來時發(fā)生什么，點擊這一塊發(fā)生什么汰寓，這一塊滾動時發(fā)生什么這些都屬于視圖行為（交互）
視圖狀態(tài)和行為都封裝在了 ViewModel 里口柳。這樣的封裝使得 ViewModel 可以完整地去描述 View 層`。由于實現(xiàn)了雙向綁定有滑，ViewModel 的內(nèi)容會實時展現(xiàn)在 View 層跃闹，這是激動人心的，因為前端開發(fā)者再也不必低效又麻煩地通過操縱 DOM 去更新視圖俺孙。
MVVM 框架已經(jīng)把最臟最累的一塊做好了辣卒，我們開發(fā)者只需要處理和維護 ViewModel掷贾，更新數(shù)據(jù)視圖就會自動得到相應(yīng)更新睛榄，真正實現(xiàn) 事件驅(qū)動編程。
View 層展現(xiàn)的不是 Model 層的數(shù)據(jù)想帅，而是 ViewModel 的數(shù)據(jù)场靴，由 ViewModel 負責(zé)與 Model 層交互，這就完全解耦了 View 層和 Model 層港准，這個解耦是至關(guān)重要的旨剥，它是前后端分離方案實施的重要一環(huán)。
