MVVM (Model-View-ViewModel)

# MVVM (Model-View-ViewModel) ![MVVM](https://i.imgur.com/UBcyNz4.png) MVVM(Model-View-ViewModel) - 是一種軟體架構模式 - 也被稱為 model-view-binder ，與 - MVP(Model-View-Presenter) - PM(Presentation Model) 一樣都來自 MVC(Model-View-Controller) 模式 ## 架構： Model： - 管理所有的**資料來源**(ex. API、資料庫) - 管理後端的**業務邏輯處理**和**數據操控(CRUD)** View： - 在螢幕上 **顯示介面(UI)** 給使用者 - 接收**使用者與介面的互動( User Interaction )** :::warning - 前端主要由 HTML 和 CSS 來構建 - 通常是應用程序中的一個頁面，也可以是父視圖的子組件 ::: View Model： - 負責處理 **View 的畫面邏輯/UI邏輯**(ex.事件處理、元件的互動/指令) - 接收 **View 的指令(ICommand)** - 並**對 Model 請求資料**(ex.Ajax...method of Model Classes) - 將 View 所需的**資料保存/暫存**(輸入/顯示) 起來供 View 使用 :::success - 前端主要由 JavaScript 來構建 - View Model 為 View 與 Model 的中介，也是 MVVM 的核心 - View 所使用的不是 Model 的數據，而是 ViewModel 的數據，由 ViewModel 負責與 Model 交流互動，這就完全解耦了 View 和 Model ，這是以 **技術單位**-前後端 **關注點分離(Separation of Concerns , SoC)** 方案實施的重要一環。 ::: ## MVVM原理： - 利用 **Data Binding (Library)** 來實現 **Observer Pattern** 的概念 - 由 View 來訂閱(subscribe) 在 ViewModel 中所需要的資料 - 並在**資料異動**時才更新 UI ( View ) - ViewModel 使用 **ICommand介面** ，接收 View 的觸發，利用 - **[ 命令(ICommand)繫結、調用 ViewModel 的 method ]** - **[ 調用 Model classes 的 method ]** 分離 **UI邏輯** 與 **業務邏輯** - ViewModel 使用 **INotifyPropertyChanged 屬性更改通知** - 通知結繫端( View )，物件的屬性內容( ViewModel )發生變更 - 當結繫端( View )收到此通知便會進行畫面(UI) 更新的動作即 **資料驅動(Data-Driven)** 而不是事件驅動(Event-Driven) :::danger - 但是**過大資料繫結**會導致相當大的**記憶體消耗** ::: ## 與 MVC 的差別核心的運作： - ViewModel 在繫結到 View 後，基本上**不接收使用者的行為( User Interaction )**，而是使用 **命令(Command)** 來控制 - Controller 包含 **接收使用者的行為( User Interaction )** 和資料 Model 上的改變畫面的更新： - MVVM 的 View 使用 **Data Binding** 訂閱 ViewModel 的屬性更改通知 - MVC 的 View 監聽 Model 的資料改變，同時也可能包括 Ajax 請求操作 >[【乾貨理解】理解javascript中實現MVC的原理](https://iter01.com/74230.html) ## 與 MVP 的差別 - 當 MVVM 的 ViewModel 資料更新時，透過 **INotifyPropertyChanged 屬性更改通知**，來通知 View 更新 - 當 MVP 的 Model 資料更新時，使用 **事件(Event)** 或是 **回呼函式(callback Function)** 給 Presenter ，再由 Presenter Call View 的更新 Function > [MVP (Model View Presenter) 設計模式](http://programer-learn.blogspot.com/2014/09/mvp-model-view-presenter.html) ## MVVM流程： - 當使用者跟 View(UI) 互動後，將命令傳給 ViewModel 處理 - ViewModel 接收 View 的命令並對 Model 請求資料 - ViewModel 收到 Model 的資料後，做資料的暫存，或是處理成 View 所需要的格式 - ViewModel 通知 View 資料變更 - View 更新畫面 ## MVVM優劣： - 開發人員和設計人員可以更加獨立於各自的領域，達到關注點分離(Separation of Concerns) - 開發人員可以專注於 ViewModel 、 Model ，可以在不使用 View 的情況下為 ViewModel 和 Model 創建**單元測試** - 設計人員可以專注於 View 的 **UI** 與 ViewModel **UI邏輯**，也可以在 ViewModel 輕鬆生成 View 所需要的**範例數據**以進行處理 參考如下： > [程式設計師應該知道的MVC，MVP，MVVM設計模式區別及優缺點 ](https://kknews.cc/zh-tw/news/8qzkmog.html) > [MVP(SC)、MVP(PV)、PM、MVVM 和 MVC 表現模式架構對比](https://developer.aliyun.com/article/380256) > [Binding ICommand (命令繫結)](https://me1237guy.pixnet.net/blog/post/67837890) > [邏輯移到ViewModel](https://skychang.github.io/2011/12/31/WPF-%E2%80%93-MVVM-%E4%B8%89/#:~:text=%E4%BA%86%E7%94%9A%E9%BA%BC%E8%AE%8A%E5%8C%96%E3%80%82-,%E9%82%8F%E8%BC%AF%E7%A7%BB%E5%88%B0ViewModel,-%E5%88%B0%E9%80%99%E9%82%8A%EF%BC%8C%E6%88%91) > [WPF 的 MVVM 測試](http://radio-idea.blogspot.com/2018/12/wpf-mvvm.html) > [The MVVM Pattern](https://docs.microsoft.com/en-us/previous-versions/msp-n-p/hh848246(v=pandp.10)?redirectedfrom=MSDN) > [MVVM架構](https://ithelp.ithome.com.tw/articles/10192829) > [MVVM模式](https://www.twblogs.net/a/5b8395d32b71776c51e3b1de) ###### tags: `設計模式`