Refer to ruan Yifeng’s web log, Liao Xuefeng’s official website, and some network information summary

mvc(model-view-controller)

Concept explanation:

MVC is an acronym for three words: Model, View, and Controller

  1. The top layer is the View layer, which faces the end user directly. It is provided to the user’s operation interface, is the shell of the program.
  2. The bottom layer is the core“Data layer” (Model)The data or information that the program needs to operate on.
  3. And then the middle layer is just“Controller”, which is responsible for selecting the data in the “data layer” according to the user’s input instructions from the “view layer”, and then performing corresponding operations to produce the final result.



User Operations ->View (responsible for receiving user input operations) ->Controller (business logic processing) ->Model (data persistence) ->View (feedback to View)

Connection and action: These three layers are closely linked together, but they are independent of each other. The changes inside each layer do not affect the other layers. Each layer provides interfaces that can be called by the layer above. In this way, the software can be modularized, modifying the appearance or changing data without changing the other layers, greatly facilitating maintenance and upgrading.

Struts/Spring/Hibernate SSH framework in JavaEE Struts (View, STL) -Spring (Controller, Ioc, Spring MVC) -Hibernate (Model, ORM) XXX. CSHTML xxxcontroller — xxxmodel.

MVP (model – view – the presenter)

In MVP, the Controller in MVC is replaced by Presenter (presentation). The purpose is to completely cut off the connection between View and Model, and the Presenter acts as a bridge to achieve complete isolation of communication between view-model.




ASP.NET WebForm and WinForm event-based development techniques familiar to.NET programmers are using the MVP mode. Control pages act as Views, entity database operations act as Models, and control data binding operations between views and Models belong to presenters. Control events can be handled through a custom IView interface, and both View and IView are responsible for the Presenter.

mvvm(model-view-viewModel)

If MVP is a further improvement on MVC, MVVM is a complete change in thinking. It takes the idea of “two-way binding of data Model data” as the core, so there is no connection between View and Model, and the interaction between Model and ViewModel is two-way, so the change of View data will modify the data source at the same time. Changes in the data source are immediately reflected in the View.



MVVM was first proposed by Microsoft, which borrowed from the MVC idea of desktop applications. In the front page, the Model is represented by pure JavaScript objects, and the View is responsible for display, which achieves the maximum separation between the two.

The thing that connects the Model to the View is the ViewModel. The ViewModel is responsible for synchronizing Model data to the View display, and also for synchronizing View changes back to the Model.

MVVM design philosophy: Keep an eye on Model changes and let the MVVM framework automatically update the DOM state, freeing developers from the tedious process of manipulating the DOM!

Here is an example of MVVM for the front-end framework VUE, and of course there are many well-known frameworks that use the MVVM pattern; The advantage of MVVM is data driven, data change, then the page change, so that you can use simple code, to achieve more complex logical operations; Therefore, the MVVM framework is suitable for logically complex front-end projects, such as some management systems.

Conclusion: From MVC to MVVM, the view/ Model can be completely separated. It is a decoupling process, so that each part can focus on its own role, the code logic is clearer, and the developer’s work is easier.