學(xué)習(xí)完整課程請(qǐng)移步 互聯(lián)網(wǎng) Java 全棧工程師
本節(jié)視頻
什么是 MVVM
MVVM（Model-View-ViewModel）是一種軟件架構(gòu)設(shè)計(jì)模式朽们，由微軟 WPF（用于替代 WinForm来屠，以前就是用這個(gè)技術(shù)開發(fā)桌面應(yīng)用程序的）和 Silverlight（類似于 Java Applet怕享，簡(jiǎn)單點(diǎn)說(shuō)就是在瀏覽器上運(yùn)行的 WPF） 的架構(gòu)師 Ken Cooper 和 Ted Peters 開發(fā)，是一種簡(jiǎn)化用戶界面的事件驅(qū)動(dòng)編程方式乱顾。由 John Gossman（同樣也是 WPF 和 Silverlight 的架構(gòu)師）于 2005 年在他的博客上發(fā)表。
MVVM 源自于經(jīng)典的 MVC（Model-View-Controller）模式（期間還演化出了 MVP（Model-View-Presenter） 模式）梭纹。MVVM 的核心是 ViewModel 層捺僻，負(fù)責(zé)轉(zhuǎn)換 Model 中的數(shù)據(jù)對(duì)象來(lái)讓數(shù)據(jù)變得更容易管理和使用，其作用如下：
- 該層向上與視圖層進(jìn)行雙向數(shù)據(jù)綁定
- 向下與 Model 層通過(guò)接口請(qǐng)求進(jìn)行數(shù)據(jù)交互
MVVM 已經(jīng)相當(dāng)成熟了拇舀，主要運(yùn)用但不僅僅在網(wǎng)絡(luò)應(yīng)用程序開發(fā)中逻族。當(dāng)下流行的 MVVM 框架有 Vue.js，AngularJS 等骄崩。
為什么要使用 MVVM
MVVM 模式和 MVC 模式一樣聘鳞，主要目的是分離視圖（View）和模型（Model），有幾大好處
- 低耦合： 視圖（View）可以獨(dú)立于 Model 變化和修改要拂，一個(gè) ViewModel 可以綁定到不同的 View 上抠璃，當(dāng) View 變化的時(shí)候 Model 可以不變，當(dāng) Model 變化的時(shí)候 View 也可以不變脱惰。
- 可復(fù)用： 你可以把一些視圖邏輯放在一個(gè) ViewModel 里面搏嗡，讓很多 View 重用這段視圖邏輯。
- 獨(dú)立開發(fā)： 開發(fā)人員可以專注于業(yè)務(wù)邏輯和數(shù)據(jù)的開發(fā)（ViewModel）拉一，設(shè)計(jì)人員可以專注于頁(yè)面設(shè)計(jì)采盒。
- 可測(cè)試： 界面素來(lái)是比較難于測(cè)試的躺屁，而現(xiàn)在測(cè)試可以針對(duì) ViewModel 來(lái)寫植兰。
MVVM 的組成部分
View
View 是視圖層，也就是用戶界面讽挟。前端主要由 HTML 和 CSS 來(lái)構(gòu)建嫡纠，為了更方便地展現(xiàn) ViewModel 或者 Model 層的數(shù)據(jù)烦租，已經(jīng)產(chǎn)生了各種各樣的前后端模板語(yǔ)言决瞳，比如 FreeMarker、Thymeleaf 等等左权，各大 MVVM 框架如 Vue.js皮胡，AngularJS，EJS 等也都有自己用來(lái)構(gòu)建用戶界面的內(nèi)置模板語(yǔ)言赏迟。
Model
Model 是指數(shù)據(jù)模型屡贺，泛指后端進(jìn)行的各種業(yè)務(wù)邏輯處理和數(shù)據(jù)操控，主要圍繞數(shù)據(jù)庫(kù)系統(tǒng)展開锌杀。這里的難點(diǎn)主要在于需要和前端約定統(tǒng)一的 接口規(guī)則
ViewModel
ViewModel 是由前端開發(fā)人員組織生成和維護(hù)的視圖數(shù)據(jù)層甩栈。在這一層，前端開發(fā)者對(duì)從后端獲取的 Model 數(shù)據(jù)進(jìn)行轉(zhuǎn)換處理糕再，做二次封裝量没，以生成符合 View 層使用預(yù)期的視圖數(shù)據(jù)模型。
需要注意的是 ViewModel 所封裝出來(lái)的數(shù)據(jù)模型包括視圖的狀態(tài)和行為兩部分突想，而 Model 層的數(shù)據(jù)模型是只包含狀態(tài)的
- 比如頁(yè)面的這一塊展示什么殴蹄，那一塊展示什么這些都屬于視圖狀態(tài)（展示）
- 頁(yè)面加載進(jìn)來(lái)時(shí)發(fā)生什么，點(diǎn)擊這一塊發(fā)生什么猾担，這一塊滾動(dòng)時(shí)發(fā)生什么這些都屬于視圖行為（交互）
視圖狀態(tài)和行為都封裝在了 ViewModel 里袭灯。這樣的封裝使得 ViewModel 可以完整地去描述 View 層`。由于實(shí)現(xiàn)了雙向綁定绑嘹，ViewModel 的內(nèi)容會(huì)實(shí)時(shí)展現(xiàn)在 View 層稽荧，這是激動(dòng)人心的，因?yàn)榍岸碎_發(fā)者再也不必低效又麻煩地通過(guò)操縱 DOM 去更新視圖工腋。
MVVM 框架已經(jīng)把最臟最累的一塊做好了姨丈，我們開發(fā)者只需要處理和維護(hù) ViewModel，更新數(shù)據(jù)視圖就會(huì)自動(dòng)得到相應(yīng)更新擅腰，真正實(shí)現(xiàn) 事件驅(qū)動(dòng)編程蟋恬。
View 層展現(xiàn)的不是 Model 層的數(shù)據(jù)，而是 ViewModel 的數(shù)據(jù)惕鼓，由 ViewModel 負(fù)責(zé)與 Model 層交互筋现，這就完全解耦了 View 層和 Model 層，這個(gè)解耦是至關(guān)重要的箱歧，它是前后端分離方案實(shí)施的重要一環(huán)矾飞。
