MVVM 架构模式详解

MVVM 是什么？

        MVVM 它是前端的一个架构模式，VUE.JS就是基于这个模式实现出来的一套框架

         (基于MVVM架构的还有：微信小程序，AngularJS，ReactJs)

MVVM 由什么组成？

        MVVM 由三部分组成，分别是 Model，View，ViewModel

        Model：简单说就是 JS里的变量数据

        View：简单说就是 页面上HTML元素

        ViewModel：是Vue.js的核心，它是一个Vue实例，它有两个工具，作用简单来说就是 让然 Model 与 View 产生联系，并让DOM和数据保持同步 分别是：

                DOM Listeners：监听页面上的数据被改动后，将同步更新到 Model 内

                Data Bindings：当 Model 内数据发生改变时，页面上对应的 DOM 会重新渲染

MVVM 的作用总结？

        MVVM 的架构模式，使框架具有数据驱动的特点。

MVVM 原理？

采用 数据劫持结合发布者-订阅者模式

在 Vue实例化的过程中

一方面： 通过 SE5 提供的 Object.defineProperty() 方法，将对象内所有数据转换成对应的setter，getter方法。

一方面： 初始化视图，并订阅 Watcher 来更新视图， 此时 Wather 会将自己添加到消息订阅器中 (Dep) ，初始化完毕。

当数据改变，做了什么处理？

当数据发生变化时 (触发 setter)，Observer 中的 setter 方法被触发，setter 会立即调用Dep.notify()，Dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。

MVVM 的思想？

DOM 的状态更新 让MVVM架构模式去自动完成，以减少开发人员对 DOM 的操作。

Observer ：数据监听器，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者，内部采用 SE5的 Object.defineProperty 的 getter 和 setter 来实现

Compile  ：指令解析器（v-for，v-if...），它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数

Watcher  ：订阅者，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数

Dep ：消息订阅器，内部维护了一个数组，用来收集订阅者（Watcher），数据变动触发 notify 函数，再调用订阅者的 update 方法