免責宣告：圖片來源於網路，只以傳遞知識為目的，若有侵權，聯絡[email protected]即刪！

一、 什麼是MVVM？

本來不想寫一篇MVVM的文章的，但是在Xamarin的開發中也用到了這個架構，說明還是挺重要的。翻牆在維基百科裡面搜了一下MVVM，請看下段文字，可以作為了解。

MVVM（Model–view–viewmodel）是一種軟體架構模式。

MVVM有助於將圖形使用者介面的開發與業務邏輯或後端邏輯（資料模型）的開發分離開來，這是通過置標語言或GUI程式碼實現的。MVVM的檢視模型是一個值轉換器，[1] 這意味著檢視模型負責從模型中暴露（轉換）

資料物件，以便輕鬆管理和呈現物件。在這方面，檢視模型比檢視做得更多，並且處理大部分檢視的顯示邏輯。[1] 檢視模型可以實現中介者模式，組織對檢視所支援的用例集的後端邏輯的訪問。

MVVM是馬丁·福勒的PM（Presentation Model）設計模式的變體。[2][3] MVVM以相同的方式抽象出檢視的狀態和行為，[3]但PM以不依賴於特定使用者介面平臺的方式抽象出檢視（建立了檢視模型）。
MVVM和PM都來自MVC模式。

MVVM由微軟架構師Ken Cooper和Ted Peters開發，通過利用WPF（微軟.NET圖形系統）和Silverlight（WPF的網際網路應用派生品）的特性來簡化使用者介面的

事件驅動程式設計。[3] 微軟的WPF和Silverlight架構師之一John Gossman於2005年在他的部落格上發表了MVVM。

MVVM也被稱為model-view-binder，特別是在不涉及.NET平臺的實現中。ZK（Java寫的一個Web應用框架）和KnockoutJS（一個JavaScript庫）使用model-view-binder。

三者關係如下：

二、 理解Vue的MVVM

看下面這張MVVM的圖，待我慢慢道來。

此圖解釋：

 View是檢視頁面，要想顯示或更新頁面就要通過DOM來顯示，但是並不直接去操作DOM。在View裡面有兩種語法概念是指令和大括號表示式，用來顯示資料。

Model簡單來說就是資料，這些資料提供給View使用。View在Vue的例項（例項就相當於new的一個物件）支撐下就能夠自動去Model拿取資料。

下圖中的②就是通過View中的Data Bingdings（資料繫結，也就是Vue的例項）拿資料的。

上圖中的①，View中的資料發生變化時，Model可以通過DOM Listeners（DOM監聽器）實時的給View提供資料。這裡還是舉個栗子吧，就比如說在頁面裡面有個輸入框，當輸入資料之後，馬上就要資料就會擴大十倍並顯示出來，這時Model就是實時提供View需要的資料。

概念的話，可能理解起來不容易，但是在碼程式碼的過程中就可以深深的體會到了！

如果您遇到了什麼問題，歡迎留言告訴我~

最後，感謝您的閱讀！