MVC,MVVM模式的理解

Posted 2022-04-07 ly2019

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

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 和业务逻辑分开。