MVC、MVVM区别

MVC ：Model 模型层 用于处理获取数据

 add(){ 
   let data=view.innerText +1   //数据处理
    view.innerText = data    //更新试图
}

View 视图层 用于数据显示

 <div  id='view'>1</div>  <button id='submit'>+</button>

Controller 控制层 用于处理用户交互

用户交互，dom操作，
submit.addEventListener('click',()=>{add()}) //事件触发模型层

MVVM : Model 数据模型层 用于处理获取数据

obj={
    a:1
}

View 视图层 用于数据显示

<div>{{obj.a}}</div>  <button @click="add">+</button>

ViewModel 视图模型层 用于连接view和model的桥梁

//1.处理模板{{}}的显示  及@的事件
//2.数据劫持  发布订阅...
Object.defineProperty(obj,a,{
    get(){
        return data[key]
          //订阅...
    },
    set(newValue){
        data[key]=newValue
         //发布...
    }
})

MVVM与MVC的最大区别就是：它实现了View和Model的自动同步，也就是当Model的数据改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变数据后该数据对应View层显示会自动改变。mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验