：首先介绍下老生常谈的设计模式变革，引出观察者模式，简单剖析下vm，最后表述下react与vue框架几个相关注意点。
em...，本才疏学浅，多集天下之大成，如有误，切指出。
MVC => MVP => MVVM
读过很多文章之后，觉得这些设计模式是在经历过简单到复杂工程实践后，为了解决突增的工作量，增加可维护性，通过分离关注点来改进代码的组织方式，使得各个角色功能更明确，进一步降低相互之间的耦合。
MVC架构模式属于编程的方法论，MVC模式是架构模式的一种：
- M: Model(模型) 数据层，程序需要操作的数据或信息
- V: View(视图) 用户界面
- C: Controller(控制) 业务逻辑层，根据视图层输入的指令，进行相应操作
其广泛地应用在前端和后端，针对前端和后端，这些定义囊括的范畴不尽相同。
前端MVC & 后端MVC
针对后端: V: 模版，C: 请求+路由，M: service+dao
针对前端：V: html + css ，C: js， M: ajax
可见，前后端的mvc无直接关系，本质均依据设计模块定义，作出的分离规范。前端的mvc是融合代码时期，后端mvc里v分离出来的mvc，主要是为了解决复杂js模块化的问题。
传统的mvc模型把视图渲染和数据处理做了隔离，通过控制器接收view的操作，传递给数据模型，数据模型处理之后驱动渲染视图。
mvc
代码事例
/**
上例中，尽量使数据处理与UI隔离，controller作为view和model沟通的桥梁，即controller与view的实现存在耦合，view的更新依赖model，即view和model的实现也存在耦合。
mvc同时也存在很多变种，大致上都是对dom的操作代价很高，并且分工开发的程度较低。
MVP
mv* 的区别在于“M与V联系”的部分，为进一步解决mvc中m或c和v之间的强耦合，提出改良版的mvc即mvp，对关注点的分离有了部分变化：M: 无关业务的数据处理，V: 视图，定义接口，P：响应视图指令，调用M数据进行业务处理，并将处理结果反馈至视图，驱动视图渲染。
mvp
代码事例
/**
mvp中改变了通信方向，完全隔离了v和m，通过定义v接口降低p和v的耦合度。同时，v非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 p非常厚，所有逻辑都部署在那里。
MVVMmvvm(m-v-vm)模式将p改为vm，v不再提供接口，基本与mvp模式完全一致，唯一区别在于vm对v与m做了自动关联，即双向绑定。
mvvm
代码事例
/**
观察者模式
观察者模式又叫发布订阅模式或消息机制，定义了一种依赖关系，解决了主体对象与观察者之间功能的耦合。
观察者模式
简单举例：地方中转站需要接收来此地方中转的飞机的位置信息，飞机会将自己的位置信息发送给卫星，卫星收到信息后将对应飞机的位置信息发送给订阅该飞机的中转站，如果飞机已经飞过了地方中转站，地方中转站将不再接收该飞机的位置信息。
由此可见，观察者需要一个消息容器（针对订阅的飞机的不同，分成不同的队列），以及三个方法：订阅消息方法，取消订阅的消息方法，发送订阅的消息方法。
代码事例
var
图事例
class
搭建vm
vm的功能是能够实现v和m之间的双向绑定，双向绑定体现在form表单，以简易vue中的input(v-model = "ipt")举例，v中input关联m中ipt，输入input之后，m即更改ipt的值，属于v->m的更新，实现需要事件监听，m直接更改ipt，对应更改input的值，属于m->v的更新，实现需要对象属性的拦截（Object.defineProperty(obj, prop, descriptor)），其余绑定如{{}}，为单向绑定。这里我们可以把vm看作卫星，m中的data里的属性看作飞机，{{}}等看作中转站，只是飞机发送消息依靠的是v中的一些操作。
vm原理
代码事例-v
<!DOCTYPE html>
代码事例-vm_observer.js
/**
代码事例-vm_watcher.js
/**
代码事例-vm_compile.js
/**
代码事例-vm_index.js
class
react与vue的区别
vue无疑是mvvm框架，那react呢？MVVM的一个显著特征是双向绑定，React没有这个，它是状态驱动视图（setState=>view），内部的状态内部自己控制，这样的设计，从使用上变得更确定清晰，除此之外类MVVM，也有人说mobx结合React便是繁杂版的vue。
react与vue的数据为自顶而下的单向数据流，通过props传递给子组件，父级prop的更新会向下流动到子组件，但反过来不行；react单向数据绑定，数据和视图之间单向绑定，数据 --> 视图, vue双向数据绑定，数据和视图之间双向绑定，数据 <--> 视图，这样的差异性体现在表单控件的使用上，双向绑定的是单向绑定加事件监听的语法糖，实质是通过监听用户的输入事件以更新数据的，单向绑定需要手动收集页面的变化，更新数据。
链接：
MVC，MVP 和 MVVM 的图示www.ruanyifeng.com
MVC、MVP、MVVM · 语雀www.yuque.com
一篇文章了解架构模式：MVC/MVP/MVVM - 汤姆C - SegmentFault 思否segmentfault.com
tt月下门：结合vue、react、angular谈谈MVC、MVP、MVVM框架zhuanlan.zhihu.com
西岭老湿：从项目工程化的角度，谈一下 MVC 与 MVVMzhuanlan.zhihu.com
Mvuegithub.com