2025年MVV简介

科技前沿 • 2025-03-13 20:17 • 阅读 50

大家好，我是讯享网，很高兴认识大家。

MVV简介

MVVM是基于MVC和MVP基础上演化而来。所以在论述MVVM之前先简述MVC和MVP两者的一些特点，方便理解MVVM。

一、MVC

1、概念介绍：MVC 是一种代码架构设计模式，前端中的MVC 最主要的作用就是将视图和数据模型进行分离。
MVC框架：

讯享网

M-Model : 业务逻辑和实体模型(biz/bean)
V-View : 布局文件(XML)
C-Controller : 控制器(Activity)

2、MVC的小案例
比如我这里写了个小案例，通过select选项卡，选中里面的饮料，页面对应它的颜色。
在这里插入图片描述

<!-- 页面中的select选项卡 --> <select id="drinkSelect"> <option value="coffee">coffee</option> <option value="milk">milk</option> <option value="juice">juice</option> </select> <!-- 触发选中选项卡后，显示到页面 颜色获取的p标签 --> <p id="theColorOfDrink"></p> <!-- 控制选项后界面的颜色的获取 --> <script type="text/javascript"> document.getElementById("drinkSelect").onchange = function() { 
    // 定义在函数体内部的var 这里为局部变量 var color; var colorOfDrink = { 
    "coffee":"brown", "milk":"white", "juice":"orange" }; color = colorOfDrink[this.value]; // console.log('@',color) // 将获取的颜色属性 提交到页面 document.getElementById("theColorOfDrink").innerHTML = color; } </script>

讯享网

从这个小案例中可以发现，视图的操作和数据以及逻辑的处理全部混淆在一起，View层能做的事情还是很少的，对于页面的呈现还是交由C-Controller实现，这样会导致项目中C的代码臃肿。随着项目的不断迭代，代码量的增加，如果涉及到体量更大的项目类容，后期维护起来也将会是个巨大的资源消耗。

二、MVP

1、概念介绍：View层和Model层不在直接通信，所有交互的工作都交由Presenter层来解决。
MVP框架：

M-Model : 业务逻辑和实体模型(biz/bean)
V-View : 布局文件(XML)和Activity
P-Presenter : 完成View和Model的交互

（1）MVP框架相对于MVC框架做了较大的改变，将Activity当做View使用，代替MVC框架中的 C-Controller的是 P-Presenter。
（2）从模型图中可以看到View层和Model层不在直接通信，所有交互的工作都交由Presenter层来解决。
（3）View层和Mode层都通过Presenter来通信，为了复用和可拓展性，所以MVP框架采用了基于接口设计的理念。

三、MVVM

1、概念介绍：

M-Model : 业务逻辑和实体模型(biz/bean)
V-View : 布局文件(XML)和Activity
VM（ViewModel）：视图模型层。连接view和model的桥梁。对View层的数据绑定，指令，事件绑定的声明的负责，就是处理View层的具体业务逻辑。VM底层会做好对数据绑定的监听，数据变化时View层会发生改变。

MVVM框架：

2025年MVV简介

MVV简介

一、MVC

二、MVP

三、MVVM

相关推荐