MVVM模式

随着前端项目越来越大，项目的可维护性、可扩展性和安全性等成了主要问题，超越了之前的浏览器兼容性问题。当年典型的类库如jquery，只能解决浏览器兼容性问题，但没有实现对业务逻辑的分层，所以维护性和扩展性较差，这才有了MVVM模式一类框架的出现。

MVVM又是什么呢？

M——model模型，后端传递的数据。
V——View视图。
VM——ViewModel视图模型，是连接view和model的桥梁。

M和V不能直接通信，只能通过VM。

VM要实现一个observer观察者，VM监听到数据变化时，通知视图做自动更新；

VM监听到用户操作的视图的变化，会通知数据做改动，从而实现数据的双向绑定。

MVVM实现的是业务逻辑组件的重用，使开发更高效，结构更清晰，增加代码的复用性。

在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 方法；

订阅者收到通知后，更新视图。