What is the difference between ViewModel, View and Model in MVVM pattern? _javascript skills

Model: is very simple, it is a data object related to business logic, usually mapped from the database, we can say it is the model corresponding to the database.

View: is also very simple, it is the displayed user interface.

Basically, what most software does is to read data from the data storage, display it on the user interface, and then receive input from the user interface and write it to the data storage. Therefore, there is basically no objection to the two layers of data storage (model) and interface (view). However, different people have different opinions on how to display the model to the view and how to write data from the view to the model.

The MVC school’s view is that every change on the interface is an event. I only need to write a bunch of code for each event to convert the user’s input into objects in the model. This bunch of code can Called controller.

The MVVM school of thought is that I also define a corresponding data object for various controls in the view. In this way, as long as this data object is modified, the content displayed in the view will be automatically refreshed, and when done in the view Any operation, this data object will be automatically updated accordingly, so beautiful. So:

ViewModel: is the Model corresponding to the interface (view). Because the database structure often cannot directly correspond to the interface controls one-to-one, it is necessary to define another data object to specifically correspond to the controls on the view. The responsibility of ViewModel is to encapsulate the model object into an interface data object that can display and accept input.

As for the viewmodel's data, it is automatically refreshed with the view and synchronized to the model. This part of the code can be written as a common framework, so programmers do not need to worry about it.

Simply put, ViewModel is the connector between View and Model. View and Model achieve two-way binding through ViewModel.