一、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实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

image.png

四、基于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 方法；
③ 订阅者收到通知后，更新视图。

如果你觉得我还没说清楚，请看下图：