Vue学习--MVVM模型

MVVM模型

MVVM简介
  MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
  Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

MVVM模型

  MVVM拆开来即为Model-View-ViewModel，有View，ViewModel，Model三部分组成。View层代表的是视图、模版，负责将数据模型转化为UI展现出来。Model层代表的是模型、数据，可以在Model层中定义数据修改和操作的业务逻辑。ViewModel层连接Model和View。
  在MVVM的架构下，View层和Model层并没有直接联系，而是通过ViewModel层进行交互。ViewModel层通过双向数据绑定将View层和Model层连接了起来，使得View层和Model层的同步工作完全是自动的。因此开发者只需关注业务逻辑，无需手动操作DOM，复杂的数据状态维护交给MVVM统一来管理。

Vue.js中mvvm的体现

  Vue.js的实现方式，对数据（Model）进行劫持，当数据变动时，数据会出发劫持时绑定的方法，对视图进行更新。

实例分析如下：

由例子可知ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干预。

Vue.js关于双向数据绑定的一些实现细节

  下面我又简单的了解了一下Vue.js关于双向数据绑定的一些实现细节；主要参考了下面这篇文章，很有研究价值，有意向者可以去看一下：
深入MVVM模型带你理解Vue.js的双向绑定

  vue是采用Object.defineProperty的getter和setter，并结合观察者模式来实现数据绑定的。当把一个普通的javascript对象传给Vue实例来作为它的data选项时，Vue将遍历它的属性，用Object.defineProperty将它们转为getter/setter。用户看不到getter/setter，但是在内部它们让Vue追踪依赖。在属性被访问和修改时通知变化。

• Observer数据监听器，能够对数据对象的所有属性进行监听，如有变动可拿到最新的值并通知订阅者，内部采用的Obiect.defineProperty的getter和setter来实现。
• complie指令解析器，它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定Observer和Complie的桥梁,能够订阅并收到每个属性变动的通知，执行指令绑定的相应的回调函数
• Watcher订阅者，作为连接Observer和Complie的桥梁,能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数。
• Dep消息订阅器，内部维护了一个数组，用来收集订阅者（watcher）,数据变动触发notify函数，再调用订阅者的update方法。

以上过程可总结为：

Observer相当于Model层观察vue实例中的data数据，当数据发生变化时，通知Watcher订阅者。
Compile指令解析器位于View层，初始化View的视图，将数据变化与更新函数绑定，传给Watcher订阅者。
Watcher是整个模型的核心，对应ViewModel层，连接Observer和Compile。所有的Watchers存于Dep订阅器中，Watcher将Observer监听到的数据变化对应相应的回调函数，处理数据，反馈给View层更新界面视图。

---

原文地址：ahuiyo的博客-Vue学习–MVVM模型