共计 1355 个字符，预计需要花费 4 分钟才能阅读完成。
MVVM
什么是 MVVM？
MVVM是 Model-View-ViewModel, 是把一个零碎分为了模型（model）、视图（view）和 view-model 三个局部。vue 是一个典型的 MVVM 思维，数据驱动视图 。
艰深一点就是view 层不间接和 model 层通信，他们只能通过 view-model 层通信。
vue 中 MVVM 的了解
vue 是一个 MVVM 渐进式框架，MVVM 是 vue 的理论模式，在 vue 框架中数据会主动驱动视图。咱们写 vue 就晓得它的单文件组件开发方式。
Model：数据层，仅仅关注数据自身，不关怀任何行为。
对应 vue 组件中的 data，props 属性。
View：视图层，用户操作页面，当 view-model 对 model 更新的时候，会通过数据绑定更新到 view。
对应 vue 组件中的 template 和 style 的局部。
ViewModel：业务逻辑层，view 须要什么数据，ViewModel 就提供什么数据，view 有些哪些操作，ViewModel 就要响应这些操作；View 和 ViewModel 两种交互方式：双向数据传递（数据属性和 data binding）和单向传递操作（命令属性）；因为 ViewModel 的双向数据绑定，当 Model 发生变化时，ViewModel 就会更新，ViewModel 变动，Model 也会更新。
对应继承 Vue 类的组件实例
vue 在 MVVM 思维下，view 和 model 没有间接分割，然而 view 和 view-model、model 和 view-model 之间是会交互的。当 view 视图进行 dom 操作等使数据发生变化时，能够通过 view-model 同步到 model 中，同样的 model 数据变动也会同步到 vue 中。
MVVM 的数据绑定实现
- 发布者 - 订阅模式（backbone.js）
- 脏值模式（angular/react）
- 数据劫持（vue）
Vue 实现 MVVM 的双向绑定
vue 数据劫持联合发布者 - 订阅者模式
vue 是采纳 数据劫持联合发布者 - 订阅者模式 的形式，通过 Object.defineProperty() 来劫持（监听）各个属性的 setter，getter，在数据（对象）产生变动时公布音讯给订阅者，触发相应的监听回调。
因而，要实现 MVVM 的双向绑定就必须要实现以下几点：
- 实现一个数据监听器 Observer。对数据对象的所有属性进行监听（包含子属性对象的属性），利用
Object.defineProperty()对属性都加上setter和getter（这样的话，给这个属性的某个值赋值就会触发setter, 那么就能监听数据的变动），如产生变动可拿到最新值并告诉订阅者。 - 实现一个指令解析器 Compile。对 vue 每个元素节点的指令进行扫描和解析，将指令模板的变量都替换成数据，而后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，增加监听数据的订阅者，一旦数据产生变动，收到告诉，调用更新函数进行数据更新。
- 实现一个订阅者 Watcher。Watcher 是 Observer 和 Compile 之间通信的桥梁，次要工作是订阅 Observer 中的属性值变动的音讯，当属性值发生变化时，触发指令解析器 Compile 中对应的更新函数，从而更新视图。
- 实现 MVVM 入口函数，整合以上三者。
Vue 面试题之 vue 实现 MVVM 数据绑定
