MVC和MVVM已经被谈论了好久，不过还有些开发者并不是很清楚二者的区别，因此在开发过程中会反复跌进同一个坑。那我们来梳理一下。
一、MVC——Model-View- Controller
M——model模型，获取数据，处理数据逻辑。
V——view视图，处理数据显示。
C——Controller控制器，从视图读取数据，控制用户输入，并向模型发送数据。
简单来说，MVC就是用Controller将Model的数据用View显示出来。使用MVC的目的就是将M和V的代码分离。MVC是单向通信，View跟Model必须通过Controller来连接。
二、MVVM——Model-View-ViewModel
随着前端项目越来越大，项目的可维护性、可扩展性和安全性等成了主要问题，之前的浏览器兼容性问题已经退居其次。当年典型的类库如jquery，只能解决浏览器兼容性问题，但没有实现对业务逻辑的分成，所以维护性和扩展性较差，这才有了MVVM模式一类框架的出现。MVVM又是什么呢？
M——model模型，后端传递的数据。
V——View视图。
VM——ViewModel视图模型，是连接view和model的桥梁。
M和V不能直接通信，只能通过VM。VM要实现一个observer观察者，VM监听到数据变化时，通知视图做自动更新；VM监听到用户操作的视图的变化，会通知数据做改动，从而实现数据的双向绑定。
三、MVC和MVVM的区别：
不难发现，二者的区别在于C和VM。是VM取代了C吗？不是，而是弱化了C的概念，增加了一层VM，用来抽离C中的业务逻辑，其它视图操作业务等还是放在C中实现。也就是说，MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。
四、基于MVVM实现的框架Vue.js
在vue中，Model是js中的数据，如对象、数组等；View是页面视图；VM是vue实例化对象。
1、初步了解四个东西：
- Observer监听器——监听data选项中属性是被访问或被改变，决定调用getter/setter。
- Compile指令解析器——解析元素节点的指令，初始化视图，订阅watcher来更新视图。
- Watcher订阅者——是Observer和Compile的桥梁，订阅并收到属性变动通知，执行指令绑定的相应回调函数。
- Dep消息订阅器——它的内部有一个用来收集订阅者的数组，数据变动触发notify函数，再调用订阅者的update方法。
2、如何实现双向绑定
（1）初始化阶段：
① 监听：Observer把js对象传给vue实例的data选项，vue遍历data选项中的属性，并用Object.defineProperty()方法将这些属性转成setter/getter方法，实现监听功能；
② Compile指令编译器，解析元素节点的指令，初始化视图，并订阅Watcher来更新视图；
③ watcher将自己添加到消息订阅器Dep，初始化完毕。
（2）数据变化时：
① Observer 中的 setter 方法被触发，setter调用Dep.notify()；
② Dep开始遍历所有订阅者，并调用订阅者的 update 方法；
③ 订阅者收到通知后，更新视图。
如果你觉得我还没说清楚，请看下图：
在传统的MVC模式中，前端人员只负责View（视图）部分。随着MVVM模式的出现，前端可以自己写业务逻辑以及渲染模板，后端只负责提供数据即可；前端能做的事情越来越多，在开发项目当中工作所占比重更大，这样一想是不是很开心了呢？
