首先說一說MVVM的由來，相信大家對MVC都不陌生，MVC 是開發(fā)客戶端最經(jīng)典的設(shè)計(jì)模式，但是 MVC 有讓人無法忽視的嚴(yán)重問題。在通常的開發(fā)中，除了簡單的 Model、View 以外的所有部分都被放在了 Controller 里面。Controller 負(fù)責(zé)顯示界面、響應(yīng)用戶的操作、網(wǎng)絡(luò)請求以及與 Model 交互。隨著業(yè)務(wù)邏輯的增加，controller的處理邏輯會變得越來越復(fù)雜，controller也就慢慢的變得越來越胖，這就造成了Controller邏輯復(fù)雜，難以維護(hù)。為了更好地管理代碼，更方便地?cái)U(kuò)展業(yè)務(wù)，為必要為controller瘦身，于是MVVM便呼之欲出.

MVVM：是 Model-View-ViewModel簡寫

M:對應(yīng)于MVC的M

V:對應(yīng)于MVC的V

VM:viewModel，是把MVC里的controller的數(shù)據(jù)的加載、加工功能分離出來

MVVM 是 Web 前端一種非常流行的開發(fā)模式，利用 MVVM 可以使我們的代碼更專注于處理業(yè)務(wù)邏輯而不是去關(guān)心 DOM 操作。目前著名的 MVVM 框架有 vue, avalon, angular 等，這些框架各有千秋，但是實(shí)現(xiàn)的思想大致上是相同的：數(shù)據(jù)綁定 和 視圖刷新。跟MVC一樣，主要目的是分離視圖（View）和模型（Model）。View可以獨(dú)立于Model變化和修改，一個(gè)ViewModel可以綁定到不同的'View'上，當(dāng)View變化的時(shí)候Model可以不變，當(dāng)Model變化的時(shí)候View也可以不變。在MVVM中，數(shù)據(jù)是核心，由于VIewModel與View之間的雙向綁定，操作了ViewModel中的數(shù)據(jù)，就會同步到DOM，我們透過DOM事件監(jiān)控用戶對DOM的改動，也會同步到ViewModel。

MVVM設(shè)計(jì)模式的優(yōu)點(diǎn)

1.雙向綁定技術(shù)，當(dāng)Model變化時(shí)，View-Model會自動更新，View也會自動變化。很好做到數(shù)據(jù)的一致性，不用擔(dān)心，在模塊的這一塊數(shù)據(jù)是這個(gè)值，在另一塊就是另一個(gè)值了。所以 MVVM模式有些時(shí)候又被稱作：model-view-binder模式。

2.View的功能進(jìn)一步的強(qiáng)化，具有控制的部分功能，若想無限增強(qiáng)它的功能，甚至控制器的全部功幾乎都可以遷移到各個(gè)View上（不過這樣不可取，那樣View干了不屬于它職責(zé)范圍的事情）。View可以像控制器一樣具有自己的View-Model.

3.由于控制器的功能大都移動到View上處理，大大的對控制器進(jìn)行了瘦身。不用再為看到龐大的控制器邏輯而發(fā)愁了。

4.可以對View或ViewController的數(shù)據(jù)處理部分抽象出來一個(gè)函數(shù)處理model。這樣它們專職頁面布局和頁面跳轉(zhuǎn)，它們必然更一步的簡化。

MVVM設(shè)計(jì)模式的缺點(diǎn)

1.數(shù)據(jù)綁定使得 Bug 很難被調(diào)試。你看到界面異常了，有可能是你 View 的代碼有 Bug，也可能是 Model 的代碼有問題。數(shù)據(jù)綁定使得一個(gè)位置的 Bug 被快速傳遞到別的位置，要定位原始出問題的地方就變得不那么容易了。

2.一個(gè)大的模塊中model也會很大，雖然使用方便了也很容易保證了數(shù)據(jù)的一致性，當(dāng)時(shí)長期持有，不釋放內(nèi)存就造成了花費(fèi)更多的內(nèi)存。

3.數(shù)據(jù)雙向綁定不利于代碼重用?？蛻舳碎_發(fā)最常用的重用是View，但是數(shù)據(jù)雙向綁定技術(shù)，讓你在一個(gè)View都綁定了一個(gè)model，不同模塊的model都不同。那就不能簡單重用View了。