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数据绑定