MVC与MVVM简单解析

内容来源于网络，仅供参考。

  1、MVC（Model–view–controller） 是软件工程中的一种软件架构模式，其把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。MVC模式的目的是实现一种动态的程序设计，使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能。MVC模式中，View跟Model，必须通过Controller来承上启下。

• 控制器（Controller）- 负责View和Model之间调度，转发或处理请求。
• 视图（View） - 用户在屏幕上看到的结构、布局和外观(又称UI)。
• 模型（Model） - 指的是数据和逻辑。

在MVC中很容易就会把一些业务逻辑，网络请求，数据IO都放在controller中，有可能造成controller压力大。

  2、MVVM（Model-View-ViewModel） 由 MVC 改进而来，其有助于将用户界面的开发与业务逻辑或后端逻辑（数据模型）的开发分离开来，这是通过GUI代码实现的。MVVM也被称为model-view-binder，特别是在不涉及.NET平台的实现中。其由3部分构成：模型（Model）、视图（View）和视图模型（View-Model）。MVVM和MVC的区别并不是VM完全取代了C，ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。MVVM把View和Contrller都放在了View层，Model层依然是服务端返回的数据模型。除此之外，从Controller抽离出来的与UI有关的逻辑都放在了ViewModel中，这样就减轻了Controller的负担。

• 视图模型（view-model）- MVVM没有MVC模式的控制器，也没有MVP模式的presenter，有的是一个绑定器。在视图模型中，绑定器在视图和数据之间进行通信。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。
• 视图（View） - 用户在屏幕上看到的结构、布局和外观(又称UI)。
• 模型（Model） - 指的是数据和逻辑。

总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定MVVM流程图如下：

其他：
1、MVVM不是一个纯前端的架构模式。它适用于所有的包含GUI（Graphical User Interface 图形用户接口）的应用程序中（包含后端部分）。
2、MVVM其实可以细分为M-C-VM-V的四层架构。
对于以上M-C-VM-V层的理解：

• M(odel)层：定义数据结构，建立应用的抽象模型。
• C(ontroller)层：实现业务逻辑，向上暴露数据更新的接口，调用Model层来进行模型数据的增删改查，以达到应用数据更新的目的。
• V(iew)-M(odel)层：将Model层的抽象模型转换为视图模型用于展示，同时将视图交互事件绑定到Controller层的数据更新接口上。
• V(iew)层：将视图模型通过特定的GUI展示出来，并在GUI控件上绑定视图交互事件。

3、基于MVVM模式—VUE框架的介绍

  Vue就是基于MVVM模式实现的一套框架，其使用MVVM如图：


1、为什么说VUE是一个渐进式的javascript框架, 渐进式是什么意思？

• 如果你已经有一个现成的服务端应用，你可以将vue 作为该应用的一部分嵌入其中，带来更加丰富的交互体验;
• 如果你希望将更多业务逻辑放到前端来实现，那么VUE的核心库及其生态系统也可以满足你的各式需求（core+vuex+vue-route）。和其它前端框架一样，VUE允许你将一个网页分割成可复用的组件，每个组件都包含属于自己的HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方。

以上例子，都是一步步递进的，也就是说对VUE的使用可大可小，它都会有相应的方式来整合到你的项目中。所以说它是一个渐进式的框架。

2、VUE最独特的特性：响应式系统。
  VUE是响应式的，也就是说当我们的数据变更时，VUE会帮你更新所有网页中用到它的地方。响应式原理详见官网：https://cn.vuejs.org/v2/guide/reactivity.html 。这里讲一下主流框架实现双向绑定（响应式）的做法：

• 脏值检查：angularangular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，当然google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下： DOM事件，譬如用户输入文本，点击按钮等。当一个异步事件发生时，脏检查会从根组件开始，自上而下对树上的所有子组件进行检查，这种检查方式的性能存在很大问题。
• 观察者-订阅者（数据劫持）：vueObserver 数据监听器，把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用Object.defineProperty()方法把这些属性全部转成setter、getter方法。当data中的某个属性被访问时，则会调用getter方法，当data中的属性被改变时，则会调用setter方法。Compile指令解析器，它的作用对每个元素节点的指令进行解析，替换模板数据，并绑定对应的更新函数，初始化相应的订阅。Watcher 订阅者，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数。Dep 消息订阅器，内部维护了一个数组，用来收集订阅者（Watcher），数据变动触发notify 函数，再调用订阅者的 update 方法。执行流程如下：
  

从图中可以看出，当执行 new Vue() 时，Vue 就进入了初始化阶段，一方面Vue 会遍历 data 选项中的属性，并用 Object.defineProperty 将它们转为 getter/setter，实现数据变化监听功能；另一方面，Vue 的指令编译器Compile 对元素节点的指令进行解析，初始化视图，并订阅Watcher 来更新视图， 此时Wather 会将自己添加到消息订阅器中(Dep),初始化完毕。当数据发生变化时，Observer 中的 setter 方法被触发，setter 会立即调用Dep.notify()，Dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。因为VUE使用Object.defineProperty方法来做数据绑定，而这个方法又无法通过兼容性处理，所以Vue 不支持 IE8 以及更低版本浏览器。另外，查看vue原代码，发现在vue初始化实例时， 有一个proxy代理方法，它的作用就是遍历data中的属性，把它代理到vm的实例上，这也就是我们可以这样调用属性：vm.aaa等于vm.data.aaa。

参考：
什么是MVVM，MVC和MVVM的区别，MVVM框架VUE实现原理
由浅入深讲述MVVM
还有部分来自维基百科…