Analysis on the similarities and differences of MVC, MVP and mvvc

MVC

• Model （Model）： Save the data
• View （View）： The user interface .
• controller （Controller）： Business logic

communication mode ：

Communication process ：

1. User pass UI Interface interaction trigger View Respond to ,View Send instructions to Controller
2. Controller After completing the business logic , requirement Model Update data
3. Model Send new data to View, requirement View to update , Users get feedback after the update

Typical frame ：react

Be careful ：MVC All communications are one-way

MVP

MVP Mode will MVC Of Controller Renamed Presenter

communication mode ：

Be careful ：

1. The communication between each part is two-way Of
2. View and Model No contact , All pass Presenter Pass on
3. View Very thin , Don't deploy any business logic , be called " Passive view "（Passive View）, That is, there is no initiative , and Presenter Very thick , All the logic is deployed there .

MVVM

MVVM Mode will Presenter Renamed as ViewModel（ Model view ）, Basically with MVP The pattern is exactly the same .

communication mode

The only difference is ,View and ViewModel Between Two way binding

Communication process ：

1. View Receive user interaction requests
2. View Forward the request to ViewModel
3. ViewModel operation Model Data update
4. Model Update the data , notice ViewModel Data changes
5. ViewModel to update View data

Typical frame ：Vue、Angular

With Vue For example

• model： Corresponding data Data in
• v： Templates 、UI Interface
• VM：Vue Instance object

MVVM And MVC The biggest difference is MVVM Medium ViewModel The view is automatically updated

Reference documents

MVC,MVP and MVVM Icon - Ruan Yifeng's Weblog (ruanyifeng.com)