The difference between MVC and MVVM

1. MVC

MVC is a design pattern:

  • M (Model): Model layer . It is the part of the application program used to process the application data logic , and the model object is responsible for accessing data in the database;
  • V (View): View layer . It is the part of the application that handles the data display , and the view is created based on the model data;

C (Controller): control layer. It is the part of the application that handles user interaction . The controller accepts the user's input and calls the model and view to complete the user's needs. The controller itself does not output anything or do any processing. It just receives the request and decides which model component to call to process the request, and then determines which view to use to display the returned data.


The M of MVVM in the vue framework is the back-end data, V is the node tree, and VM is the Vue({}) object from the new

  • M (Model): Model layer . It is the data object related to business logic, usually mapped from the database, we can say that it is the model corresponding to the database.
  • V (View): View layer. It is the displayed user interface.
  • VM (ViewModel): View model layer. The bridge connecting the view and the model. Because the data in the Model layer often cannot directly correspond to the controls in the View, it is necessary to define a data object specifically corresponding to the controls on the view. The responsibility of ViewModel is to encapsulate model objects into interface data objects that can display and accept input.

The View and ViewModel establish a connection through two-way binding, so that when the View (view layer) changes, it will be automatically updated to the ViewModel (view model), and vice versa.

The biggest difference between MVVM and MVC is that it realizes the automatic synchronization of View and Model, that is, when the data of the Model changes, we no longer need to manually manipulate the Dom element by ourselves to change the display of the View, but the data corresponds to the changed data. The View layer display will automatically change. MVVM does not completely replace C with VM. The purpose of ViewModel is to separate the business logic displayed in the Controller, not to replace the Controller. Other view operation services should still be implemented in the Controller .