一，前言
1.1 MVC---Model-View-Controller
m:model 数据模型层 v:view 视图层 c:controller控制器
原理：c层需要控制model层的数据在view层进行显示
1.2 MVVM---Model-View-ViewModel
在MVVM架构下，View和Model之间并没有直接的联系，而是通过viewModel进行交互的，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，而Model数据的变化也会立即反应到View上
VUE是基于MVVM的设计模式开发的
二，代码实例
我们做一个很简单的DIV显示隐藏的效果，点击toggle可以切换下面div显示隐藏
html:
<div id="box"><button class="btn">toggle</button><button class="btn2">big</button><div class="box"></div></div>
JS:
下面是我们不用设计模式写的JS，这种写法不利于维护，纯粹的面向过程去写代码：
let btn = document.getElementsByClassName("btn")[0];let boxDom = document.getElementsByClassName("box")[0];let flag = true;btn.onclick = function(){if(flag){boxDom.style.display = "none";flag = false;}else{boxDom.style.display = "block";flag = true;}}
MVC的写法：
//viewlet boxDom = document.getElementsByClassName("box")[0];//modellet model = {isShow:true,isBig:false}//controller 业务逻辑function Controller(){this.init();//初始化}Controller.prototype = {constructor:Controller,init:function(){this.addEvent()},addEvent:function(){let btn = document.getElementsByClassName("btn")[0];let btn2 = document.getElementsByClassName("btn2")[0];let that = this;btn.onclick = function(){model.isShow = !model.isShow;//更改视图了that.render();}btn2.onclick = function(){model.isBig = true;//更改视图了that.render();}},render:function(){//数据驱动视图的更改boxDom.style.display = model.isShow?"block":"none";boxDom.style.width = model.isBig?"300px":"100px";}}new Controller();//初始化一下
虽然MVC代码比较长，不过以后用起来很方便，只要是相同的效果拿过来用就行
mvvm与mvc最大的区别：
MVVM实现了view与model的自动同步，也就是model属性改变的时候， 我们不需要再自己手动操作dom元素去改变view的显示，而是改变属性后该属性对应的view层会自动改变。