MVC & MVVM

2019-04-17 00:04:26 :tw-1f31f:

MVC，MVP以及MVVM，作为当下最流行的三种架构模式，应用广泛，使用频繁。
估为了深一步的学习和理解不同架构模式的优缺以及异同，写下此文。

MVC是什么

MVC是Model-View-Controller的缩写，它将应用程序划分为三个部分：

Model: 模型（用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法）
View: 视图（渲染页面）
Controller: 控制器（M和V之间的连接器，用于控制应用程序的流程，及页面的业务逻辑）

在MVC中，允许在不改变视图VIEW的情况下，改变用户对视图输入的响应方式，根据用户对VIEW的操作，调用Controlle来处理，而在在CONTOROLLER中响应VIEW的事件，调用MODEL的接口对数据进行操作，只要MODEL发生变化，就像应给相关的视图进行更新操作。

假设在原生的html+js的页面中，html上的布局代码看作是VIEW层，而js的逻辑代码看成是Controller层，当用户在html上进行了操作时，js响应了html的操作，也就是事件的监听，最后调用Model层（例如Ajax）完成对数据的修改，最后再反馈到View（html页面）上去，便完成了MVC的工作。

一般来说，在MVC里的三层模型中，所有通信都是单向的。

Pandao editor.md

1. View 传送指令到 Controller

2. Controller 完成业务逻辑后，要求 Model 改变状态

3. Model 将新的数据发送到 View，用户得到反馈

但在实际的开发中，往往因为不同的需求而做灵活的改变。
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html

##MVC的缺点

花费大量时间将MVC应用到规模并不是很大的应用程序通常会得不偿失。【这个是最明显的缺点，例如我们仅仅需要到数据库查信息，如果不分层设计我们可以直接从视图型层到模型去访问，效率上会有所提高，如果以代码的复杂性为代价，多了一层，代码量大大增加，在这个时候就降低了开发效率】
视图对模型数据的低效率访问。依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。【例如，页面的有一部分数据我并没有更新，但是提交到模型层照样会去获得返回显示】
视图与控制器是相互分离，但却是联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用。【例如，不可能总是在jsp页面中直接访问模型，一般放在逻辑控制层进行处理，servlet】

https://blog.csdn.net/sunforraining/article/details/79015080

MVVM是什么

MVVM和MVC模型的最大区别是：实现了View和Model的数据的双向绑定，也就是说，当MODEL的属性发生改变是，我们不再自己手动的操作DOM，而是改变之后的属性对应的VIEW层会自动的发生改变。

View 和 Model 之间没有联系，通 ViewModel 进行交互，而且 Model 和 ViewModel 之间的交互是双向的，因此视图的数据改变会同时修改数据源，而数据源的数据变化也会立即反映到 View 上。

在VUE中

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="addnum">数字自增</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 1
  },
  methods: {
      addnum: function () {
      this.message = this.message++；
    }
  }
})

这里的html部分相当于View层，当ViewModel对Model进行更新时，通过数据绑定更新到View。
Vue实例中的data相当于Model层，而ViewModel层的核心是Vue中的双向数据绑定，即Model变化时VIew可以实时更新，View变化也能让Model发生变化。

MVC&MVVM