MVVM Explained: What is Model-View-Viewmodel , and How Does it Work?

Aug 26, 2021
tweeter facebook linkedin
MVVM Explained: What is Model-View-Viewmodel , and How Does it Work?

What is MVVM?

Model–view–viewmodel, popularly called MVVM, is a software architectural pattern that facilitates the separation of the development of the graphical user interface (the view) – be it via a markup language or GUI code – from the development of the business logic or back-end logic (the model) so that the view is not dependent on any specific model platform. 

The “view model” of MVVM is a value converter that means that it is view model’s responsibility for exposing the data objects from the Model in such a way that objects are easily managed and presented.

MVVM Pattern

Here, is a pattern for MVVM:

MVVM Architecture

One of the key reasons the MVVM architecture is so useful is because it offers two-way data binding between view and view-model. It also helps you to automate the propagation of modifications inside View-Model to the view. The view-model makes use of observer pattern to make changes in the view-model.

Let’s see each component of MVVM in detail:


The model stores data and related logic. It represents data that is being transferred between controller components or any other related business logic.

For example, a Controller object will retrieve the student info from a school database. It manipulates data and sends it back to the database or use it to render the same data.


The View stands for UI components like HTML, CSS, jQuery, etc. In MVVM the view is held responsible for displaying the data which is received from the Controller as an outcome. 

View Model:

The view model is responsible for presenting  of functions, commands and methods to support the state of the View. It is also accountable for operating the model and activating the events in the View.

Advantages of MVVM

Here, are pros/benefits of MVVM

Disadvantages of MVVM

These are cons/drawback of employing MVVM in your application:


Leave a Reply

Your email address will not be published.