MVC 與 MVVM：示例的主要區別 · Guru99 中文系列教程

# MVC 與 MVVM：示例的主要區別 > 原文： [https://www.guru99.com/mvc-vs-mvvm.html](https://www.guru99.com/mvc-vs-mvvm.html) ## 什么是 MVC？ MVC 框架是一種架構模式，可將應用程序分為三個主要的邏輯組件：模型，視圖和控制器。因此縮寫為 MVC。完整的 MVC 是模型視圖控制器。在此體系結構中，構建了一個組件來處理應用程序的特定開發方面。 MVC 將業務邏輯層和表示層彼此分離。這種體系結構模式主要用于桌面圖形用戶界面（GUI）。在本教程中，您將學習： * [什么是 MVC？](#1) * [什么是 MVVM？](#2) * [MVC 模式](#3) * [MVVM 模式](#4) * [MVC 的功能](#5) * MVVM 的功能 * [MVVM 和 MVC 之間的區別](#7) * [MVC](#8) 的優勢 * [MVVM 的優點](#9) * [MVC 的缺點](#10) * [MVVM 的缺點](#11) ## 什么是 MVVM？ MVVM 架構借助標記語言或 GUI 代碼促進了圖形用戶界面的開發分離。 MVVM 的完整形式是 Model–View–ViewModel。 MVVM 的視圖模型是一個值轉換器，這意味著視圖模型有責任以易于管理和呈現對象的方式從模型中公開數據對象。 ## MVC 模式 ![](https://img.kancloud.cn/7a/c1/7ac1e822b8a21c16d8b32f5680068a9f_928x658.png) MVC Architecture 三個重要的 MVC 組件是： * **型號**：它包含所有數據及其相關邏輯。 * **視圖**：向用戶顯示數據或處理用戶交互。 * **控制器**：模型和視圖組件之間的接口。讓我們詳細了解每個組件： ### 模型模型組件存儲數據和相關邏輯。它表示在控制器組件或任何其他相關業務邏輯之間傳輸的數據。例如，Controller 對象可幫助您從數據庫中檢索客戶信息。它處理數據并將其發送回數據庫或使用它來呈現相同的數據。 ### 視圖視圖是應用程序中代表數據表示的部分。視圖是由從模型數據收集的數據創建的。視圖請求模型提供信息，以便其將輸出重新發送給用戶。視圖還表示來自圖表，圖表和表的數據。例如，任何客戶視圖都將包括所有 UI 組件，例如文本框，下拉菜單等。 ### 控制者控制器是應用程序中處理用戶交互的部分。控制器解釋用戶的鼠標和鍵盤輸入，通知“模型”和“視圖”進行適當更改。控制器向模型發送命令以更新其狀態（例如，保存特定文檔）。控制器還將命令發送到其關聯的視圖以更改視圖的顯示方式（例如，滾動特定文檔）。 ## MVVM 模式這是 MVVM 的模式： ![](https://img.kancloud.cn/6e/cd/6ecdf06ba00b29e0843ef5809fd34db8_558x249.png) MVVM Architecture MVVM 體系結構提供了視圖和視圖模型之間的雙向數據綁定。它還可以幫助您自動將視圖模型內部的修改傳播到視圖。視圖模型利用觀察者模式來更改視圖模型。讓我們詳細了解一下此組件： ### Model 該模型存儲數據和相關邏輯。它表示在控制器組件或任何其他相關業務邏輯之間傳輸的數據。例如，一個 Controller 對象將從學校數據庫中檢索學生信息。它處理數據并將其發送回數據庫或使用它來呈現相同的數據。 ### 視圖：該視圖代表 UI 組件，例如 HTML，CSS，jQuery 等。在 MVVC 模式中，視圖負責負責顯示從 Controller 接收到的數據作為結果。此視圖也將模型轉換為用戶界面（UI）。 ### 查看模型：視圖模型負責呈現功能，命令，方法，以支持視圖的狀態。還負責操作模型并激活視圖中的事件。 ## MVC 的功能這是 MVC 的重要功能： * 簡便，無摩擦的可測試性。高度可測試，可擴展和可插入的框架 * 您還可以利用 ASP.NET，Django，JSP 等提供的現有功能。 * 它提供了對 HTML 以及 URL 的完全控制。 * 它支持測試驅動開發（TDD） * 這種架構提供了邏輯分離 * 允許路由 SEO 友好 URL。 * 提供映射以獲取可理解和可搜索的 URL。 ## MVVM 的功能這里是 MVVM 體系結構的功能： * MVVM 是為具有數據綁定功能的桌面應用程序編寫的-XAML 和 INotifyPropertyChanged 接口 * 如果要在視圖模型中進行修改，則視圖模型使用觀察者模式。 * MVVM 模式主要由 WPF，Silverlight，nRoute 等使用。 ## MVVM 和 MVC 之間的區別這是 MVVM 和 MVC 之間的重要區別 ![](https://img.kancloud.cn/ae/b7/aeb7051bb91bfa387dfe8ad4d5411f5e_601x168.png) | **MVC** | **MVVM** | | 控制器是應用程序的入口點。 | 該視圖是應用程序的入口點。 | | 控制器&視圖之間的一對多關系。 | 視圖&視圖模型之間的一對多關系。 | | 視圖沒有對控制器的引用 | 視圖具有對視圖模型的引用。 | | MVC 是舊模型 | MVVM 是一個相對較新的模型。 | | 難以閱讀，更改，進行單元測試和重用此模型 | 當我們具有復雜的數據綁定時，調試過程將很復雜。 | | MVC 模型組件可以與用戶分開測試 | 易于進行單獨的單元測試，并且代碼是事件驅動的。 | ## MVC 的優勢這是 MVC 的優點/優點 * 對新型客戶的支持更加輕松 * 各種組件的開發可以并行執行。 * 通過將應用程序劃分為單獨的（MVC）單元來避免復雜性 * 它僅使用前端控制器模式，該模式使用單個控制器處理 Web 應用程序請求。 * 為測試驅動的開發提供最佳支持 * 它適用于 Web 應用程序，Web 應用程序得到了大型 Web 設計人員和開發人員團隊的支持。 * 它提供了清晰的關注點分離（SoC）。 * 所有的分類和對象彼此獨立，因此您可以分別對其進行測試。 * MVC 允許將控制器上相關動作的邏輯分組在一起。 ## MVVM 的優勢這是 MVVM 的優點/好處 * 業務邏輯與 Ul 分離 * 易于維護和測試 * 易于重用的組件 * 松散耦合的體系結構：MWM 使您的應用程序體系結構松散耦合。 * 您可以為 viewmodel 和 Model 層編寫單元測試用例，而無需引用 View。 ## MVC 的缺點這是 MVC 的缺點/缺點 * 業務邏輯與 Ul 混合 * 難以重用和實施測試 * 沒有正式的驗證支持 * 數據的復雜性和效率提高 * 在現代用戶界面上使用 MVC 的困難 * 需要多個程序員進行并行編程。 * 需要具備多種技術知識。 ## MVVM 的缺點這是 MVVM 的缺點/缺點 * 維護控制器中的許多代碼 * 有人認為，對于簡單的 MVVM 體系結構 UI 可能會過大。 * 在視圖和視圖模型之間沒有提供緊密的耦合 ## 關鍵區別 * MVC 框架是一種架構模式，可將應用程序分為三個主要的邏輯組件：模型，視圖和控制器。另一方面，MVVM 借助標記語言或 GUI 代碼促進了圖形用戶界面的開發分離 * 在 MVC 中，控制器是應用程序的入口點，而在 MVVM 中，視圖是應用程序的入口點。 * MVC 模型組件可以與用戶分開進行測試，而 MVVM 易于進行單獨的單元測試，并且代碼是事件驅動的。 * MVC 體系結構在 Controller &視圖之間具有“一對多”關系，而在 MVVC 體系結構中，View &視圖模型之間具有“一對多”關系。