MVC and MVVM

mvvm

Concept ：MVVM yes Model-View-ViewModel Abbreviation , Corresponding to ： data , View , Model view .Model It's the data model in our application ,View It is our UI View layer , adopt ViewModle, We can Modle The data in is mapped to View On view , meanwhile , stay View Layer modified some data , It will also reflect and update our Modle. The simple understanding is Two way data binding , That is, when the data changes , The view changes , When the view changes , The data will also change synchronously .

With vue For example ：
view Corresponding template,vm Corresponding new Vue({…}),model Corresponding data

1 . view View layer

<p>Hello, {
    {
     name }}!</p>          --View layer  --VUE One way binding in 
<input v-model="name">             --View layer  --VUE Two way binding in 

2 . model The data layer

data: {
    
      name: ''               --Model layer 
  }

3 .VM layer

 VUE The frame is encapsulated 
new Vue({
    …})

The relationship among the three ：

view You can bind through events ( or v-model Instructions ) How to influence model,model Can affect... In the form of data binding view,viewModel It's a model and view Connected connectors

MVC Pattern summary （ Typical frameworks are angular.js）

1 . namely Model、View、Controller namely Data model 、 View 、 controller .

View： View layer ;
Model： Business data layer ;
Controller： controller . receive View Instructions passed from the layer , selection Model Data corresponding to layer , Carry out the corresponding operation .

2. Take a similar example in reality ,MVC Like the operation mode of a shop ,View The floor is equivalent to the storefront of this shop ,Model The floor is equivalent to the warehouse of this shop ,Controller The floor is equivalent to the executive department of this shop .

characteristic ：MVC There are two modes , Either way ,MVC All communications are one-way , It can also be seen from the figure ,View The layer will be from Model Take the data , therefore MVC Medium View Layer and the Model There is still coupling between layers .