简说MVVM（图文了解一下）

浅浅的花香味﹌ 2023-05-31 06:38 17阅读 0赞

# 简说MVVM #

#### mvvm拆分表示 ####

MVVM可分为 M( **Model（模型）** ), V( **View（视图）**), VM( **ViewModel （模型视图）**),这个结构是不是特别像JAVA的MVC结构

MVC的结构是M( **Model（模型）** ) V( **View（视图）** ) C( **Controller（控制器）** )

**Model（模型）** 是应用程序中用于处理应用程序数据逻辑的部分。

通常模型对象负责在数据库中存取数据。

**View（视图）** 是应用程序中处理数据显示的部分。

通常视图是依据模型数据创建的。

**Controller（控制器）** 是应用程序中处理用户交互的部分。

通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc3NjU1_size_16_color_FFFFFF_t_70]  
**MVVM**即Model-View-ViewModel，mvvm的设计原理是基于mvc的

**MVVM**是Model-View-ViewModel的缩写，

**Model**代表数据模型负责业务逻辑和数据封装，

**View**代表UI组件负责界面和显示，

**ViewModel**监听模型数据的改变和控制视图行为，处理用户交互，简单来说就是通过双向数据绑定把View层和Model层连接起来。

在MVVM架构下，View和Model没有直接联系，而是通过ViewModel进行交互，我们只关注业务逻辑，不需要手动操作DOM，不需要关注View和Model的同步工作  
![在这里插入图片描述][20191023100314662.jpg]如果这还是很抽象的话，那你看这张图，因为我学的是vue所以就用vue和大家讲一下，如

data(){
        return{
          bool:false,
          t:null
        }
      },

data( **Model（模型）** )里面的数据如 t:null 要到HTML界面( **View（视图）**)以 \{ \{t\}\} 的形式输出里面的值实现到页面

原生js是做不到的对吧，那么他就要经过Vue( **ViewModel （模型视图）**)的加工处理才能实现这一功能，反之亦然。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc3NjU1_size_16_color_FFFFFF_t_70 1]

### 这是我的总结，如有问题也请骂的轻点，然后顺便写下自己的理解，已助新人脱坑 ###

### 以下是一些MVVM的优点摘抄以及一些扩展可看可不看 ###

### MVVM优点 ###

MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model），有几大优点

**1. 低耦合**。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

**2. 可重用性**。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

。

**2. 可重用性**。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

**3. 独立开发**。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计，使用[Expression][] Blend可以很容易设计界面并生成xaml代码。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc3NjU1_size_16_color_FFFFFF_t_70]: /images/20230531/ca38f83ba5cf4abfa24a0dbb6caa56e7.png
[20191023100314662.jpg]: /images/20230531/89c1c650401644a7a9332b4276970159.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyODc3NjU1_size_16_color_FFFFFF_t_70 1]: /images/20230531/886b713b8e974d5cb88ca41d544f4e78.png
[Expression]: https://baike.sogou.com/lemma/ShowInnerLink.htm?lemmaId=52918064&ss_c=ssc.citiao.link