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框架：