The difference between MVVM and MVC

MVVM design pattern

M: Model data model, storing simple data logic

V: View: Represents UI components and is responsible for transforming the data model into UI for display

VM: ViewModel synchronizes the objects of View and Model. When the data in the model changes, the conversion is successful without going through the background server, and the data in the view page changes immediately

In essence, there is no connection between Model and View. The two are connected through ViewModel. The interaction between ViewModel and model is two-way binding.
Insert picture description here

advantage

1. Low coupling: In the MVVM mode, the data is independent of the UI. The ViewModel is only responsible for processing and providing data. How the UI wants to process the data is determined by the UI itself. The ViewModel does not involve anything related to the UI, even if the control changes (input Replace with p), ViewModel hardly needs to change any code, just focus on your own data processing

2. Automatically synchronize data: ViewModel connects the View layer and the Model layer through two-way data binding, and the View and Model can be automatically synchronized. Programmers do not need to manually manipulate the DOM, and do not need to pay attention to the synchronization of the data state. MVVM manages the complex data state maintenance uniformly

3. Reusability: You can put some view logic in a ViewModel and let many views reuse this view logic.

4. Independent development: Developers can focus on business logic and data development (ViewModel), and designers can focus on page design.

5. Testable: ViewModel contains data and business logic, and View focuses on UI. This is very convenient for testing. There is no mutual dependence at all. Whether it is UI unit testing or business logic unit testing, it is all Low coupling

MVC design pattern

M: Model----Put the data in the model and show it to the user

V: View—what the user sees

C: Contral----controller, access to the underlying database. Send data to the model

Insert picture description here

Guess you like

Origin blog.csdn.net/rraxx/article/details/113934901