MVC MVP MVVM 图解

时间:2023-03-10 08:42:44
MVC MVP   MVVM 图解

1、MVC

(1)图解

MVC MVP   MVVM 图解

解释:

  • 视图(View):用户界面。
  • 控制器(Controller):业务逻辑
  • 模型(Model):数据保存

各部分之间的通信方式如下:

MVC MVP   MVVM 图解

  • View 传送指令到 Controller
  • Controller 完成业务逻辑后,要求 Model 改变状态
  • Model 将新的数据发送到 View,用户得到反馈

所有通信都是单向的

(2)通信:

更新于2018.12.31 

以下2个图就是mvc更新视图的2种方式。

具体的通信方式又分为2种:

  • 通过 View 接受指令

MVC MVP   MVVM 图解

  • 直接通过controller接受指令

MVC MVP   MVVM 图解

2、MVP

(1)图解:

MVC MVP   MVVM 图解

(2)说明

  • 各部分之间的通信,都是双向的。
  • View 与 Model 不发生联系,都通过 Presenter 传递。
  • View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

3、MVVM

MVC MVP   MVVM 图解

双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。

更新2018.12.31

vue框架的mvvm:

MVC MVP   MVVM 图解

data中的数据就是M

页面视图是View

vue实例是VM