MVVM模式及其應用研究

溫海標

摘要：MVVM（Model-View-ViewModel）模式是軟件架構設計模式，是一種程序設計思想，在軟件開發過程中進行分層設計，各層有不同的任務，目的是減少程序代碼的耦合，提高軟件的重用性、可維護性、可擴展性。該文對MVVM模式原理展開分析，MVVM模式與經典的MVC模式對比研究，以及對Vue.js實現MVVM模式的流程展開分析。

關鍵詞：MVVM模式;MVC模式;軟件設計模式

中圖分類號：TP311 ? ? ?文獻標識碼：A

文章編號：1009-3044（2020）24-0092-02

Abstract： The MVVM （Model-View-View Model） mode is a software architecture design mode， which is a programming design idea. In the software development process， the layered design is performed. Each layer has different tasks. The purpose is to reduce the coupling of program code and improve Software reusability， maintainability， and scalability. This article analyzes the principles of the MVVM model. The MVVM model is compared with the classic MVC model. Finally， the process of Vue.js implementing the MVVM model is analyzed.

Key words： MVVM model; MVC model; software design mode

1 背景

過去由于軟件功能和界面比較簡單，軟件開發者將用戶界面代碼和業務邏輯處理代碼混開發程序。但隨著時代的變化和計算機技術不斷更新迭代，用戶對軟件功能和界面的需求也越來越復雜，這種軟件開發方式也暴露出致命的缺陷，如軟件維護成本高，擴展性差。為了提高軟件的性能，施樂帕克研究中心在20世紀80年代提出MVC（Model-View-Controller）軟件設計模式[1]，對軟件進行分層設計，主要思想是將軟件的用戶界面代碼和業務邏輯處理代碼進行分離解耦，但在用戶的強需求下，使用MVC模式開發的軟件也有不足，如控制器（Controller）過于臃腫，其代碼難以管理和維護。后來有開發者對MVC模式進行改進，提出一種新的軟件設計模式：MVVM（Model-View-ViewModel）模式。

MVVM模式最早由微軟的WPF和Silverlight的架構師John Gossman于2005年在他的博客提出[2]，當時已將該模式應用在微軟的軟件開發中。MVVM模式的出現促進了圖形用戶界面前端開發和后端業務邏輯分離[3]，對前端開發工程師和后端開發工程師的工作進行解耦，減少他們之間的交流成本，進而提高軟件開發的效率。

2 MVVM模式原理

MVVM模式由View、ViewModel、Model組成，各層有特定的功能。

View層為視圖層，即前端用戶界面，主要由HTML和CSS來構建，用于展示ViewModel層或Model層的數據。

Model層為數據模型層，Model層主要負責業務邏輯處理和對數據進行獲取與存放，該層的數據來源可以是遠程數據庫服務器中的數據，也可以是本地數據庫服務器中的數據。在程序代碼中，Model層的代碼主要體現為數據管理者。

ViewModel層主要負責將來自后端Model層數據轉換為符合View層的視圖數據模型。該層所封裝的數據模型包括視圖的狀態和行為兩部分，在前端頁面各區域展示內容的安排屬于視圖狀態，而例如頁面發生點擊事件、滾動事件等時，區域發生的變化屬于視圖行為，這使得ViewModel層能完整地描述View層。ViewModel的內容能實時展示在View層，實現數據雙向綁定，程序開發者更新ViewModel數據，View層的內容可以得到相應的更新。

MVVM模式中，View層與Model層之間不能直接交互，它們之間的交互行為通過ViewModel實現，View層展示的數據并不是來自Model層的數據，而是ViewModel層的數據，ViewModel負責與Model交互，將Model層數據進行解析和轉換為符合View層的數據。MVVM模式分層示意圖如下圖所示：

這種模式解耦了View層和Model層，在實際程序開發中，可以使用這種模式進行前后端分離，后端代碼不實現前端的功能，只提供數據接口，前端需要數據時，調用該接口即可。

3 MVVM與MVC

MVC模式中的M和V與MVVM相同，分別表示Model（數據模型）和View（視圖）。數據模型層負責業務數據處理，視圖層負責程序界面的顯示。程序在實際應用中，需要將數據模型層處理后的數據結果放置視圖層，以更新視圖層的數據，將數據模型層數據賦值給視圖層的操作，由Controller（控制器）實現。MVC模型示意圖如下所示：

控制層允許直接引用視圖層和數據模型層，而視圖層和數據模型層不能直接引用控制層，不能顯式地視圖層和數據模型層的代碼中寫與控制層相關代碼。視圖層和數據模型層是兩個獨立的區域，兩者間不能出現引用，否則程序設計違背了MVC的規范。

控制層將數據模型層數據賦值給視圖層的操作中，需要把數據模型層數據轉換成視圖層能直接使用的數據，這種轉換操作稱為數據解析。早期，應用程序的功能和數據結構比較簡單，控制層數據解析操作容易實現，但隨著時代的變化發展，應用程序的功能和數據結構越來越復雜，控制層數據解析操作也隨之變得越來越復雜，控制層的代碼變得越來越臃腫。為了解決這個問題，程序開發者將控制層的任務分離，建立一個專門用于數據解析操作的新類“ViewModel”。