MVC/MVP/MVVM 都是常见的软件架构设计模式。说到区别,主要在于 C(Controller)、P(Presenter)、VM(View-Model)。相同点则是 MV(Model-View)。
Model
Model 层用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法。
View
View 作为视图层,主要负责数据的展示。
MVC
Controller
Controller 用来定义用户界面对用户输入的响应方式,它连接 Model 和 View,用于控制应用程序的流程,处理用户的行为和数据上的改变。当用户对 View 进行操作时,在 Controller 中响应 View 的事件,并调用 Model 的接口对数据进行操作,一旦 Model 发生变化便通知相关视图进行更新。
MVC 模式的业务逻辑主要集中在 Controller,而且 MVC 中 VIew 和 Controller 一般是一一对应的,捆绑起来表示一个组件。
MVP
MVP 是 MVC 模式的改良,Model 管理数据,View 负责视图,Controller/Presenter 负责业务逻辑。
跟 MVC 不同,在 MVP 中严格禁止 View 和 Model 间的直接交互,必须通过 Presenter 来完成。
MVVM
MVVM 把 VIew 和 Model 的同步逻辑自动化了。以前 Presenter 负责的 View 和 Model 同步不在手动地进行操作,而是交给框架提供的数据绑定功能进行负责,只想要告诉它 View 显示的数据对应的是 Model 哪一部分即可。
Vue 就是典型的 MVVM 模式框架。
Model
在 MVVM 中,我们可以把 Model 称为数据层,因为它仅仅关注数据本身,不关心任何行为(格式化数据由 View 负责),这里我们可以理解为一个类似 JSON 的数据对象。
View
MVVM 的 View 通过使用模板语法来声明式的将数据渲染进 DOM,当 ViewModel 对 Model 进行更新的时候,会通过数据绑定更新到 View。
ViewModel
ViewModel 大致上就是 MVC 的 Controller 和 MVP 的 Presenter 了,也是整个模式的重点,业务逻辑也主要集中在这里,其中的一大核心就是数据绑定。
与 MVP 不同的是,之前由 Presenter 负责的 View 和 Model 之间的数据同步交给了 ViewModel 中的数据绑定进行处理,当 Model 发生变化,ViewModel 就会自动更新;ViewModel 变化,Model 也会更新。
不同的 MVVM 框架中,实现数据绑定的技术有所不同。目前一些主流的前端框架实现数据绑定的方式大致有以下几种:
- 数据劫持(Vue)
- 发布—订阅模式(Knockout、Backbone)
- 脏值检查(Angular)
Vue 采用数据劫持 & 发布—订阅模式的方式,通过 ES5 提供的 Object.defineProperty() 方法来劫持(监控)各属性的 getter、setter,并在数据发生变动时通知订阅者,触发相应的监听回调。