1. MVC框架

MVC全名是Model View Controller，是模型(model)－檢視(view)－控制器(controller)的縮寫，一種軟體設計典範，用一種業務邏輯、資料、介面顯示分離的方法組織程式碼，將業務邏輯聚集到一個部件裡面，在改進和個性化定製介面及使用者互動的同時，不需要重新編寫業務邏輯。MVC被獨特的發展起來用於對映傳統的輸入、處理和輸出功能在一個邏輯的圖形化使用者介面的結構中。

1.1 MVC 程式設計模式

MVC 是一種使用 MVC（Model View Controller 模型-檢視-控制器）設計建立 Web 應用程式的模式： ^[1]

• Model（模型）表示應用程式核心（如資料庫）。

• View（檢視）顯示效果（HTML頁面）。

• Controller（控制器）處理輸入（業務邏輯）。

MVC 模式同時提供了對 HTML、CSS 和 JavaScript 的完全控制。

Model（模型）是應用程式中用於處理應用程式資料邏輯的部分。
　　通常模型物件負責在資料庫中存取資料。

View（檢視）是應用程式中處理資料顯示的部分。
　　通常檢視是依據模型資料建立的。

Controller（控制器）是應用程式中處理使用者互動的部分。
　　通常控制器負責從檢視讀取資料，控制使用者輸入，並向模型傳送資料。

2.MVVM框架

MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行為抽象化，讓我們將檢視 UI 和業務邏輯分開。當然這些事 ViewModel 已經幫我們做了，它可以取出 Model 的資料同時幫忙處理 View 中由於需要展示內容而涉及的業務邏輯。微軟的WPF帶來了新的技術體驗，如Silverlight、音訊、視訊、3D、動畫……，這導致了軟體UI層更加細節化、可定製化。同時，在技術層面，WPF也帶來了 諸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由來便是MVP（Model-View-Presenter）模式與WPF結合的應用方式時發展演變過來的一種新型架構框架。它立足於原有MVP框架並且把WPF的新特性糅合進去，以應對客戶日益複雜的需求變化。

2.1 MVVM模式的組成部分

模型

• 模型是指代表真實狀態內容的領域模型（面向物件），或指代表內容的資料訪問層（以資料為中心）。

檢視

• 就像在MVC和MVP模式中一樣，檢視是使用者在螢幕上看到的結構、佈局和外觀（UI）。

檢視模型

• 檢視模型是暴露公共屬性和命令的檢視的抽象。MVVM沒有MVC模式的控制器，也沒有MVP模式的presenter，有的是一個繫結器。在檢視模型中，繫結器在檢視和資料繫結器之間進行通訊。

繫結器

• 宣告性資料和命令繫結隱含在MVVM模式中。在Microsoft解決方案堆中，繫結器是一種名為XAML的標記語言。繫結器使開發人員免於被迫編寫樣板式邏輯來同步檢視模型和檢視。在微軟的堆之外實現時，宣告性資料繫結技術的出現是實現該模式的一個關鍵因素。

3.MVVM框架與MVC框架的區別

mvc 和 mvvm 其實區別並不大。都是一種設計思想，主要區別如下：

1.mvc 中 Controller演變成 mvvm 中的 viewModel

2.mvvm 通過資料來驅動檢視層的顯示而不是節點操作。

3.mvc中Model和View是可以直接打交道的，造成Model層和View層之間的耦合度高。而mvvm中Model和View不直接互動，而是通過中間橋樑ViewModel來同步

4.mvvm主要解決了:mvc中大量的DOM 操作使頁面渲染效能降低，載入速度變慢，影響使用者體驗