结合Vue谈谈MVVM的理解

一、MVC

1. MVC是Model-View-Controller的缩写，就是模型-视图-控制器

• Model：后端传递的数据
• View：看到的页面
• Controller:页面的业务逻辑

2. MVC是单向通信，即View和Model，必须通过Controller来承上启下
3. 使用MVC的目的就是将M和V分开
4. MVC和MVVM的区别并不是VM取代了C，ViewModel存在的目的在于抽离了Controller中展示的业务逻辑，而不是替代了Controller，其他视图操作业务还是应该放在Controller中实现，也就是说MVVM实现了业务逻辑组件的重用

二、MVVM

1. MVVM是Model-View-ViewModel的缩写，即模型-视图-视图模型
   Model:后端传递的数据
   View：所看到的页面
   ViewModel：MVVM模式的核心，它是连接 Model和View的模型
   2. ViewModel有两个方向
   将Model转换成View，将后端传递的数据转换成所看到的页面，实现的方式是数据绑定
   将View转换成Model，即将所看到的页面转换成后端的数据，实现的方式是DOM事件监听
   这两个方向都实现的我们称之为数据的双向绑定
2. 总结
   在MVVM模式的框架下视图和模型是不能直接通信的，它们通过ViewModel来通信
   ViewModel通常要实现一个Observer观察者,当数据发生变化的时候，ViewModel监听到数据的变化之后通知视图做自动更新，当用户操作视图的时候，Viewmdoel也能监听到视图的变化，然后通知数据做出改动，这实际上就实现了数据的双向绑定。并且MVVM的View和ViewModel可以互相通信
3. MVVM流程图
   

三、为什么会出现MVVM

1. 开发者在代码中大量调用相同的DOM API，处理繁琐，操作冗余
2. 大量的DOM操作使得页面的渲染性能降低
3. 当Model发生变化的时候，开发者需要手动去主动更新View，当用户的操作导致Model发生变化，开发者同样需要将变化的数据同步到Model中
   其实，早起的jquery的出现就是为了前端能更简洁的操作DOM设计的，但是它只解决了第一个问题
   MVVM 的出现，完美解决了以上三个问题。
   　MVVM 由 Model、View、ViewModel 三部分构成，Model 代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步View 和 Model的对象。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到View 上。
　ViewModel通过双向数据绑定把View和Model连接了起来，而View和Model之间的同步工作完全是自动的，无需人为干涉，因此开发者只需要关注业务逻辑，不需要操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护统一由MVVM来管理

四、Vue.js

1. Vue.js采用Object.defineProperty的getter和setter，并结合观察者模式来实现数据绑定的
2. 当把一个普通的JS对象传给Vue实例来作为它的data选项时，Vue将会遍历它的属性，并用Object.defineproperty()方法将它们转换成getter/setter方法，当data中的属性被访问的时候，则会调用getter方法，当data中的属性被改变的时候，会调用setter方法
3. 名词解析
   （1）Complie指令解析器，它的作用是对每个元素节点的指令进行解析，替换模板数据，并绑定对应的更新函数，初始化相应的订阅
   （2）Watcher订阅者，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令并绑定到相应的回调函数
   （3）Dep消息订阅器，内部维护了一个数组，用来收集订阅者（Watcher），数据变动触发函数，再调用订阅者的update方法
4. 流程描述
   从图中看出，当执行new Vue()的时候Vue就进入初始化阶段：
   一方面，Vue会遍历data选项中的属性，并用Object.defineProperty将它们转换成getter/setter实现数据变化监听功能
   另一方面，vue的指令编译器Compile对元素节点进行解析，初始化视图，并订阅watcher来更新视图，此时Watcher会将自己添加到消息订阅器（dep）中，初始化完毕
   当数据发生变化的时候，Observer的setter方法被触发，setter会立即调用Dep.notify()，Dep开始遍历所有的Watcher订阅者，并调用订阅者的update方法，订阅者收到通知后会对视图做出相应的更新