MVVM

1.第一阶段，直接用JavaScript操作DOM节点，使用浏览器提供的原生API：

var dom = document.getElementById('name');
dom.innerHTML = 'Homer';
dom.style.color = 'red';

第二阶段，由于原生API不好用，还要考虑浏览器兼容性，jQuery横空出世，以简洁的API迅速俘获了前端开发者的芳心：

$('#name').text('Homer').css('color', 'red');

第三阶段，MVC模式，需要服务器端配合，JavaScript可以在前端修改服务器渲染后的数据。

现在，随着前端页面越来越复杂，用户对于交互性要求也越来越高，想要写出Gmail这样的页面，仅仅用jQuery是远远不够的。MVVM模型应运而生。

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

ViewModel如何编写？需要用JavaScript编写一个通用的ViewModel，这样，就可以复用整个MVVM模型了。

这就是MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！

2.MVC简介

Model——数据模型。

View——页面视图。

Controller——页面控制器,负责处理View和Model的事件。

数据关系

• View 接受用户交互请求
• View 将请求转交给Controller
• Controller 操作Model进行数据更新
• 数据更新之后，Model通知View更新数据变化
• View 更新变化数据

方式

所有方式都是单向通信

结构实现

View ：使用 Composite模式 （混合模式）
View和Controller：使用 Strategy模式 （策略者模式）
Model和 View：使用 Observer模式同步信息（观察者模式）

2.MVP

mvp的全称为Model-View-Presenter，Model提供数据，View负责显示，Controller/Presenter负责逻辑的处理。MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不是通过 Controller。

数据关系

• View 接收用户交互请求
• View 将请求转交给 Presenter
• Presenter 操作Model进行数据更新
• Model 通知Presenter数据发生变化
• Presenter 更新View数据

MVP的优势

1. Model与View完全分离，修改互不影响
2. 更高效地使用，因为所有的逻辑交互都发生在一个地方—Presenter内部
3. 一个Preseter可用于多个View，而不需要改变Presenter的逻辑（因为View的变化总是比Model的变化频繁）。
4. 更便于测试。把逻辑放在Presenter中，就可以脱离用户接口来测试逻辑（单元测试）

方式

各部分之间都是双向通信

3.MVVM简介

ViewModel: 相比较于MVC新引入的视图模型。是视图显示逻辑、验证逻辑、网络请求等代码存放的地方。

4.MVVM框架

MVVM框架主要包括三个部分Model、View和ViewModel，
Model指的是数据部分，对应到前端就是一些Javascript对象，
View指的视图部分，对应到前端就是DOM，
ViewModel就是连接数据和视图的中间件，
在MVVM的框架下视图和数据是不能直接通信的，它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，
当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，
而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，
这实际上就实现了数据的双向绑定。

MVVM框架的主要应用场景

1）针对具有复杂交互逻辑的前端应用

2）提供基础的架构抽象

3）通过Ajax数据持久化，保证前端用户体验

好处就是当前后端进行一些数据交互的时候，前端可以通过Ajax请求对后端做数据持久化，不需要刷新整个页面，只需要改动DOM里需要改动的那部分数据和内容，
特别是对于移动端应用场景，刷新页面的代价太昂贵，会重新加载很多资源，虽然有些资源会被缓存，但是页面的DOM、JS、CSS都会被浏览器重新解析一遍，
因此，移动端页面经常会做成SPA单页应用，在这个基础上就诞生了很多MVVM框架，如Angular、React、Vue

Vue.js的核心思想

Vue.js的核心思想包括两个方面：数据驱动和组件化

数据驱动：DOM是数据的一种自然映射，在vue.js中只需要操作数据，vue.js通过directives指令去对DOM做一层封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM变化，DOM是数据的一种自然映射，vue.js还会对操作做一些监听，当我们修改视图的时候，vue.js监听到这些变化，从而去改变数据，这样就实现了数据的双向绑定。

  组件化的目的是扩展HTML元素，封装可重用的代码

  组件设计原则：

  1）页面上每个独立的可视/可交互区域视为一个组件，

  2）每个组件对应一个工程目录，组件所需要的各种资源在这个目录下就近维护，

  3）页面不过是组件的容器，组件可以嵌套自由组合形成完整的页面。

MVVM设计模式的优点 

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

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

3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，生成xml代码。 

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