什么是mvc和mvvm？以及mvc和mvvm的区别

淩亂°似流年 2022-08-29 10:09 350阅读 0赞

# mvvm 和 mvc #

## mvc ##

mvc是一种代码架构设计模式，前端中的mvc最主要的作用就是将视图和数据模型进行分离

### 为什么需要mvc ###

也就是为什么需要将视图和数据模型进行分离

<select id="drinkSelect">
        <option value="coffee">coffee</option>
        <option value="milk">milk</option>
        <option value="juice">juice</option>
    </select>
    <p id="theColorOfDrink"></p>
    
    <script type="text/javascript"> document.getElementById("drinkSelect").onchange = function() { var color; var colorOfDrink = { "coffee":"brown", "milk":"white", "juice":"orange" }; color = colorOfDrink[this.value]; document.getElementById("theColorOfDrink").innerHTML = color; } </script>

通过上面代码我们会发现视图的操作和数据以及逻辑的处理全部混淆在一起了，当前代码量小，并不会发现太大的问题，但是项目大，代码量多的时候，对于代码的维护会相对复杂，分离后具有如下优势

*  维护性高
 *  代码耦合性低
 *  代码可复用

### 怎么设计mvc ###

*  Model：数据层（存数据、改数据）
 *  View：视图层（页面展示和dom的操作）
 *  Controller：控制视图层和数据层的关联，主要通过监听dom事件

代码改良版：

#### V视图层 ####

页面结构

dom操作

showDrinkColor.view = { 
        start:function(){ 
            // 获取select监听change事件
            document.getElementById("drinkSelect").onchange = this.onchange;
        },
        onchange:function(){ 
            // 事件函数 做的逻辑 获取 变化后的数据传递给controller
            showDrinkColor.set(document.getElementById("drinkSelect").value);
        },
        update:function(){ 
            document.getElementById("theColorOfDrink").innerHTML = showDrinkColor.model.getDrinkColor();
        }
    };

#### M数据层 ####

数据和操作数据的逻辑:

showDrinkColor.model = { 
        colorOfDrink:{ 
            "coffee":"brown",
            "milk":"white",
            "juice":"orange"
        },
        selectedDrink:null,
        setDrink:function(drinkName){ 
            this.selectedDrink = this.colorOfDrink[this.selectedDrink]?drinkName:null;
            this.onchange();
        },
        onchange:function(){ 
            showDrinkColor.view.update();
        },
        getDrinkColor:function(){ 
            return this.selectedDrink?this.colorOfDrink[this.selectedDrink]:"white";
        }
    };

#### C控制层 ####

视图和数据模型 进行关联

1.  视图发生变化触发Controller，并且将数据传递给Controller
2.  Controller拿到更新的数据触发model并将更新的数据传递给model
3.  model拿到数据更新数据并且触发view视图更新

## mvvm ##

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版，整体和mvc差不多，最大的区别就是**mvc是单向的，而mvvm是双向的，并且是自动的，也就是数据发生变化自动同步视图，视图发生变化自动同步数据**，同时解决了 **mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。和当 Model 频繁发生变化，开发者需要主动更新到 View**

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

*  耦合低，是真的低，view和model完全分离
 *  维护性高，易维护，上手快
 *  双向绑定：视图发生变化数据自动同步，数据发生变化视图也自动同步
 *  减少了dom的操作，可以更多的关注业务逻辑

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/4a0874b6636349f188c3f056309c3148.png