MVC和MVVM的区别

一、概念

MVC,MVP,MVVM是三种常见的前端架构模式(Architectural Pattern),它通过分离关注点来改进代码组织方式。不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法，一种架构模式往往能使用多种设计模式。

MVC模式是MVP,MVVM模式的基础，这两种模式更像是MVC模式的优化改良版,他们三个的MV即Model，view相同，不同的是MV之间的纽带部分。本文主要介绍MVC与MVVM的应用与区别，因为MVP好像不是很常用。

二、MVC

这个MVC是站在整个项目角度来看的，涵盖了前端和后端，前端是V(view层)，后端是VC(controller+model)

三、MVVM

mvvm是前端视图层的分层开发思想，主要把每个页面分成了M、V、VM，其中VM是MVVM思想的核心，因为它是M和V之间的调度者

重点：前端页面中使用MVVM，主要是为了让开发更加方便，因为MVVM提供了数据的双向绑定，这个双向绑定是由VM来提供的

这里可以举个vue的例子

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

代码解析：这里的html部分相当于View层，data相当于Model层，可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM元素，通过对view层元素的事件监听，一view有需要改变model（如点击后改变数据内容），ViewModel就会通过对应事件对Model进行更新，更新完后，数据会自动更新到View，这就是view->vm->model->view的过程。另一条路就是model数据改变（如：接口请求返回数据变化）会自动更新至View层

ViewModel层的核心是Vue中的双向数据绑定，即Model变化时View可以实时更新，View变化也能让Model发生变化。