浅析MVC、MVP、MVVM 三种开发模式以及Vue双向数据绑定原理

MVC

M：model V：view C：controller

MVC 是不改变试图的情况下改变试图对用户输入的相应方式

Model 层用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法
View 作为视图层，主要负责数据的展示
Controller 让它来定义用户界面对用户输入的响应方式，它连接模型和视图，用于控制应用程序的流程，处理用户的行为和数据上的改变

用户对V的操作交给了C处理，在C中相应V的事件调用M的接口对数据进行操作
一旦M发生变化便通知相关试图进行更新!

MVP

MVP中的V不直接使用M，而是通过为P提供接口，让P去更新M，再通过观察者模式更新V。
M => Model管理数据 V => View负责显示 P => Presenter 负责业务逻辑 
与MVC相比，MVP模式通过解耦View和Model，完全分离视图和模型使职责划分更加清晰；
由于View不依赖Model，可以将View抽离出来做成组件，它只需要提供一系列接口提供给上层操作

MVVM

MVVM（Model-View-ViewModel）最早由微软提出。
ViewModel指 "Model of View"——视图的模型

在MVVM中，我们可以把Model称为数据层，因为它仅仅关注数据本身，不关心任何行为,
格式化数据由View的负责
VM实现数据双向绑定
当Model发生变化，ViewModel就会自动更新；ViewModel变化，Model也会更新。

双向数据绑定原理——Vue

Vue 采用 数据劫持 和 发布-订阅模式的方式，
通过ES5提供的Object.defineProperty()方法来劫持(因为ie8以下不支持该方法，所以vue不兼容ie8)
各属性的getter、setter，并在数据（对象）发生变动时通知订阅者，出发相应的监听回调。
由于，是在不同数据上出发同步，可以精确的将变更发送给绑定的试图，而不是对所有的数据都执行一次检测，
要实现Vue中的双向数据绑定，大致可以划分三个模块：Observer、Compile、Watcher
Observer 数据监听器
负责对数据对象的所有属性进行监听（数据劫持），监听到数据发生变化后通知订阅者。

Compiler 指令解析器
扫描模板，并对指令进行解析，然后绑定指定事件。

Watcher 订阅者
关联Observer和Compile，能够订阅并收到属性变动的通知，执行指令绑定的相应操作，更新视图。Update()是它自身的一个方法，用于执行Compile中绑定的回调，更新视图。