MVC,MVVM模式的理解

Posted ly2019

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了MVC,MVVM模式的理解相关的知识,希望对你有一定的参考价值。

基本上,我们的产品就是通过接口从数据库中读取数据,然后将数据经过处理展示到用户看到的视图上。当然我们还可以从视图上读取用户的输入,然后通过接口写入到数据库。但是,如何将数据展示到视图上,又如何将用户的输入写入到数据库中,很多人都有自己的想法,因此也就出现了很多种架构设计。

1. MVC(Model-View-Controller)

Model(模型):数据层,负责存储数据

View(视图):展现层,用户所看到的页面

Controller(控制器):协调层,负责协调Model和View,根据用户在View上的动作在Model上作出对应的更改,同时将更改的信息返回到View上。技术图片

MVC 架构通常是使用控制器更新模型,视图从模型中获取数据去渲染。当用户有输入时,会通过控制器去更新模型,并且通知视图进行更新。但是MVC有一个巨大的缺陷就是控制器承担的责任太大了,随着项目愈加复杂,控制器中的代码会越来越臃肿,导致出现不利于维护的情况。

2.MVVM(Model-View-ViewModel)

Model 代表数据模型,数据和业务逻辑都在Model层中定义

View 代表 UI 视图,负责数据的展示

ViewModel 负责监听 Model 中数据的改变并且控制视图的更新,处理用户交互操作;

Model 与 View 没有直接的关联,而是通过 ViewModel 来进行联系的,View 与 ViewModel 之间有着双向数据绑定的联系。因此,View 中由于用户交互操作而改变的数据也会在 Model 中同步, Model 中的数据发生改变时会触发View 层刷新, 所以,开发者只需要专注对数据的维护操作即可,不需要操作 dom。

技术图片

MVVM 本质上就是 MVC 的改进版。MVVM 就是将其中的View 的状态和用户的行为抽象化,让我们将视图 UI 和业务逻辑分开。

 

以上是关于MVC,MVVM模式的理解的主要内容,如果未能解决你的问题,请参考以下文章

关于vue项目中mvvm模式的理解

mvvm框架和mvc有啥不同

MVVM

MVVM框架设计模式的简单理解

MVC / MVP / MVVM 到底是啥?

MVC, MVP, MVVM比较以及区别