The relationship between MVC, MVP, and MVVM

Introduction

write this essay is to deepen their own impression, after all, write than to see can obtain more, in addition I to these three models of understanding or shallow, to be in later work study have more in-depth understanding, so inevitably there will be misunderstanding, here recommend everyone read Liaoche about MVVM introduction, and Nanyi MVC,MVP and MVVM diagram and talk about the MVC pattern, I believe you will have a deeper understanding.

Overview

MVC, MVP, and M-VVM are all architectural patterns that are designed to solve the problem of application complexity management in graphical interfaces.

Development History

MVC Pattern Overview

1. That is, model, view, controller, i.e. models, views, controllers.

• View: It is provided to the user's operating interface, is the shell of the program;
• Model: Data and information that the program needs to manipulate;
• Controller: Receive the command that the view layer passes over, select the corresponding data of the model layer, and do the corresponding operation.

2. To give a similar example of reality, MVC is like a shop's operating mode, the view layer is equivalent to the shop's storefront, the model layer is equivalent to the store's warehouse, controller layer equivalent to the shop's executive department.

3.MVC has the following two modes, regardless of which mode, MVC communication is one-way, as can be seen from the graph, the view layer will take the data from the model layer, so the view layer and model layer in MVC is still there is coupling.

MVP Mode Overview

1.MVP is evolved from MVC, where the model, View, Presenter;view, and model and the M and V,MVP in MVC just turn the controller in MVC into Presenter;

2. We can tell from the introduction of MVC that there is a coupling between the view layer and the model layer in MVC, but we do not advocate the direct interaction between the view layer and the model layer; MVP is the embodiment of such a thought, The view layer interacts with the model only through presenter;

The difference between 3.MVP and MVC is that its communication is bidirectional, as shown in two directions: v->p->m,m->p->v

Overview of the MVVM pattern

The 1.MVVM was evolved by the MVP, and the MVVM pattern was basically the same as the MVP, just turning p in the MVP into a VM, the ViewModel,

Data in 2.MVVM can be two-way binding, that is, the view layer data changes in the ViewModel data changes, and conversely ViewModel in the data changes, the view layer data will also change

3. The front-end frame Vue illustrates MVVM, and of course there are many well-known frameworks that use the MVVM pattern; the benefit of MVVM is that data-driven, data-changing, the page changes, so that the simple code can be used to achieve more complex logic operations, so the MVVM framework is more suitable for the logical complex front-end project , such as some management systems.

1) Prepare the view layer

<p>hello, {{name}}!</p>          -one-way binding in--view layer--vue

<input v-model="name">             --view layer--vue in two-way binding

2) Preparing the data tier

data: {            "               --model layer        }

3) As for the VM layer, the Vue frame has been packaged, and the details can be read in the blog of Liao Xuefeng;

4) Thanks to the MVVM framework, we now want to change the value of the name attribute in the <p> tab of the view layer and the <input> tag, just by the following way, so that the "Jack" name is displayed on the page, and if it is not the MVVM framework, we need to pass document.getElementById(‘name‘). ever innerHTML = ‘jack‘，这种操作dom节点的方式来改变页面的值。

 This ' Jack '

Note: This article is original work, if there is a reference will be mentioned in the text, if there is omission, involving infringement, please contact me, will be amended immediately.

The relationship between MVC, MVP, and MVVM