一、什么是 mvvm？ MVC、MVP、MVVM三种模式的区别与详解

简介

MVC、MVP、MVVM都是常见的软件架构模式。

MVC（Model-View-Controller）架构模式中，将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller）。Controller负责处理用户交互和调度业务逻辑，View负责显示数据，Model负责数据的存储和逻辑处理。

MVP（Model-View-Presenter）架构模式，类似于MVC，但将View和Model的交互逻辑抽象到了Presenter中。在MVP中，View负责展示数据和接收用户输入，Presenter负责处理用户输入并更新View和Model。

MVVM模式（Model-View-ViewModel）架构模式，是将View和ViewModel关联起来，通过双向数据绑定实现View和ViewModel的同步更新。View负责展示数据和用户交互，ViewModel负责处理数据和业务逻辑，Model负责存储数据。MVVM的优点是能够降低View和ViewModel之间的耦合，使得代码更加可维护和可测试。

MVC详解

MVC架构模式认为，软件架构应该由三部分组成，模型（Model）、视图（View）和控制器（Controller）。
组件：
1.Model（模型）：负责数据的处理和业务逻辑。可以理解为数据库存储和业务层处理。

2.View（视图）：负责展示数据给用户，并处理用户的输入。可以理解为用户可以看的到和操作的页面。

3.Controller（控制器）：负责协调模型和视图之间的交互，处理用户的输入并更新模型和视图。

MVC模式的核心思想是将应用程序分为三个独立的部分，使得每个部分可以独立开发、测试和维护。

这3种组件通过交互来协作：View创建Controller后， Controller根据用户交互调用Model的相应服务，而Model会将自身的改变通知View，View则会读取Model的信息以更新自身。
在这里插入图片描述
MVC架构的优点在于模型和视图的分离，提高了代码的可维护性和可测试性，用Controller作为中介，实现了模型和视图之间的解耦。但缺点是视图和控制器之间的交互复杂，增加了开发的复杂度。

MVP详解

MVP模式类似MVC模式，它通过Presenter作为中介来协调Model和View之间的交互。实现视图和模型的解耦，视图通过接口与Presenter进行交互，Presenter将视图的事件传递给模型进行处理，并将处理结果返回给视图进行展示。
组件

1.Model（模型）：负责数据的处理和业务逻辑。

2.View（视图）：负责展示数据给用户，并处理用户的输入。

3.Presenter（Presenter）：负责协调模型和视图之间的交互，处理用户的输入并更新模型和视图。
在这里插入图片描述
它的优点也是在于可以把视图和模型的解耦，方便进行单元测试，同时，Presenter作为中介，将视图和模型之间的交互逻辑集中处理，可以支持多个视图对应一个Presenter的情况，但缺点在于Presenter可能会变得臃肿，难以管理。视图和Presenter之间的交互仍然较为复杂。

到这里大家可能会问，那MVC和MVP的不同点在哪？
从架构图和组件直接的交换可以看出，不同点:

MVP模式：
1.View不直接与Model交互，而是通过与Presenter交互来与Model间接交互
2.Presenter与View的交互是通过接口来进行的，更有利于添加单元测试
3.通常View与Presenter是一对一的，但复杂的View可能绑定多个Presenter来处理逻辑，业务相似的时候也可以多同个View共享一个Presenter。
MVC模式：
1.View可以与Model直接交互
2.Controller是基于行为的，并且可以被多个View共享
3.Controller可以负责决定显示哪个View

而它们的相同点有：
优点：
1.降低耦合度
2.模块职责划分明显
3.利于测试驱动开发
4.代码复用
5.隐藏数据
6.代码灵活性
缺点：
额外的代码复杂度及学习成本。

MVVM 详解

MVVM模式通过数据绑定机制将ViewModel中的数据直接绑定到视图上，实现了视图和数据的自动同步。Vue中就使用了这种模式进行数据的双向绑定。
组件

1.Model（模型）：负责数据的处理和业务逻辑。

2.View（视图）：负责展示数据给用户，并处理用户的输入。

3.ViewModel（视图模型）：负责将模型中的数据转换为视图可以直接使用的形式，并监听视图的变化来更新模型的数据。
在这里插入图片描述
它的优点在于实现视图和模型的解耦，方便进行单元测试，同时数据绑定机制简化了视图和模型之间的交互逻辑，ViewModel可以通过命令模式实现对用户输入的响应。缺点在于，数据绑定可能导致性能问题，需要谨慎使用。