vue-架构与思想-MVVM模式和MVC模式的区别

今天又重新捡起Vue，想用vue做个自己的应用。作为一个后台服务的se，对前台一直是很苦恼的。然后按着这个思路就干起来了，当然就遇到了这个问题，MVVM到底是什么？MVC当然是清楚的。那么找了些资料，学习以记之，与君共享！

1.MVVM模式和MVC模式的区别

先说结论，再说细节：

1、起源：MVVM模式是由MVC模式衍生出来的；
2、区别：MVVM模式是双向绑定数据，而MVC模式是单向通信；
3、场景：MVVM模式一般用于前端开发的较多，MVC模式在服务端用的较多。

2. MVC模式

2.1 MVC概述

MVC模式最初生根于服务器端的Web开发，后来渐渐能够胜任客户端Web开发，能够满足其复杂性和丰富性。

MVC是Model-View-Controller的缩写，它将应用程序划分为三个部分：
1. Model: 模型（用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法）
2. View: 视图（渲染页面）
3. Controller: 控制器（M和V之间的连接器，用于控制应用程序的流程，及页面的业务逻辑）

• Controller是Model和View的协调者，Controller把Model中的数据拿过来给View使用。Controller可以直接与Model和View进行通信，而View不能与Controller直接通信。，当有数据更新时，Model也要与Controller进行通信，这个时候就要用Notification和KVO，这个方式就像发广播一样，Model发信号，Controller设置接收监听信号，当有数据更新是就发信号给Controller，Model和View不能直接通信，这样违背MVC设计原则。View与Controller通信需要利用代理协议的方式，Controller可以直接根据Model决定View的展示。View如果接受响应事件则通过delegate，target-action，block等方式告诉Controller的状态变化。Controller进行业务的处理，然后再控制View的展示。
• Controller负责将Model的数据用View显示出来
  用户操作> View (负责接受用户的输入操作)>Controller（业务逻辑处理）>Model（数据持久化）>View（将结果通过View反馈给用户）

2.2 MVC特点：

MVC模式的特点在于实现关注点分离，即应用程序中的数据模型与业务和展示逻辑解耦。在客户端web开发中，就是将模型(M-数据、操作数据)、视图(V-显示数据的HTML元素)之间实现代码分离，松散耦合，使之成为一个更容易开发、维护和测试的客户端应用程序。

1、View 传送指令到 Controller ；
2、Controller 完成业务逻辑后，要求 Model 改变状态 ；
3、Model 将新的数据发送到 View，用户得到反馈。

2.3 MVC优点：

耦合性低，视图层和业务层分离，这样就允许更改视图层代码而不用重新编译模型和控制器代码。

• 重用性高
• 生命周期成本低
• MVC使开发和维护用户接口的技术含量降低
• 可维护性高，分离视图层和业务逻辑层也使得WEB应用更易于维护和修改
• 部署快

2.4 MVC缺点：

• 不适合小型，中等规模的应用程序，花费大量时间将MVC应用到规模不是很大的应用程序/系统通常会得不偿失。

• 视图与控制器间过于紧密连接，视图与控制器是相互分离，但却是联系紧密的部件，视图没有控制器的存在，其应用是很有限的，反之亦然，这样就妨碍了他们的独立重用。

• 视图对模型数据的低效率访问，依据模型操作接口的不同，视图可能需要多次调用才能获得足够的显示数据。对未变化数据的不必要的频繁访问，也将损害操作性能。

• 所有业务逻辑都在Controller里操作，逻辑复杂且不利于维护

• 大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

• 当 Model 频繁发生变化，需要主动更新到View ；当用户的操作导致Model发生变化，同样需要将变化的数据同步到Model中， 这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

• 由于MVC模式的缺陷，MVC的变种模式衍生出MVVM模式。

2.5 MVC应用：

在web app 流行之初， MVC 就应用在了java（struts2）和C#（ASP.NET）服务端应用中，后来在客户端应用程序中，基于MVC模式，AngularJS应运而生。

3. MVVM模式

MVVM是Model-View-ViewModel的简写。
其核心是提供对View 和 ViewModel 的双向数据绑定，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，View的变动，自动反映在ViewModel上，反之亦然，这样就保证视图和数据的一致性。

微软的WPF(Windows Presentation Foundation–微软推出的基于Windows 的用户界面框架)带来了新的技术体验, 使得软件UI层更加细节化、可定制化。与此同时，在技术层面，WPF也带来了 诸如Binding（绑定）、Dependency Property（依赖属性）、Routed Events（路由事件）、Command（命令）、DataTemplate（数据模板）、ControlTemplate（控制模板）等新特性。

MVVM模式其实是MV模式与WPF结合的应用方式时发展演变过来的一种新型架构模式。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

3.1 MVVM概述：

• M：Model（数据模型）
• V：View
• VM：ViewModel 是一个同步View 和 Model的对象。View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互。ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。
  

VM双向绑定：在 MVVM 框架中，View(视图) 和 Model(数据) 是不可以直接通讯的，在它们之间存在着 ViewModel 这个中间介充当着观察者的角色。当用户操作 View(视图)，ViewModel 感知到变化，然后通知 Model 发生相应改变；反之当 Model(数据) 发生改变，ViewModel 也能感知到变化，使 View 作出相应更新。这个一来一回的过程就是我们所熟知的双向绑定。

3.1 MVVM优点：

MVVM模式和MVC模式类似，主要目的是分离视图（View）和模型（Model），有几大优点：

• 低耦合，视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的”View”上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

• 可重用性，可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

• 独立开发，开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用Expression Blend可以很容易设计界面并生成xml代码。

• 可测试，界面向来是比较难于测试的，而现在测试可以针对ViewModel来写。

3.2 MVVM常见框架使用

用户交互：

1. 用户查看view、控制view
2. 通过VM - > update model

数据改变：

1. model -> vm ->v