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

MVC

M:model V:view C:controllervue

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中绑定的回调,更新视图。
相关文章
相关标签/搜索