MVVM

领域驱动设计

• VO（View Object）
  视图对象，用于展示层，其作用是把某个指定页面或组件的所有数据封装起来。
• DO（Domain Object）
  领域对象，从现实世界中抽象出来有形或无形的业务实体
• PO（Presistent Object）
  持久化对象，在关系型数据库中跟持久层的数据结构形成一一对应的映射关系
• Domain
  领域驱动层，用户与数据交互的核心中转站，控制用户数据收集、请求转向等。

ViewModel和View一起组成领域驱动架构体系中的展示层Presention，在MVVM架构中，ViewModel连接视图View和数据业务的Model层，而Domain和Data数据持久化层共同组成整个Model。

image.png

常见的客户端结构设计有三种方式

• MVC Model-View-Controller
• MVP Model-View-Presenter
• MVVM Model-View-ViewModel

MVVM(Model-View-ViewModel)是一种软件架构设计模式，由微软WPF和Silverlight的架构师Ken Cooper和Ted Peters开发，是一种简化用户界面的事件驱动编程方式，由John Gossman于2005年博客发表。

MVVM是一种架构模式，并非一种框架，是一种思想，一种组织和管理代码的艺术。它利用数据绑定、属性依赖、路由事件、命令等特性实现高效灵活的架构。

WPF(Windows Presentation Foundation)是微软推出基于Windows的用户界面框架。

MVVM源于MVC(Model-View-Controller)模式，期间还演化出MVP(Model-View-Presenter)模式。MVVM的出现促进了GUI前端开发和后端开发逻辑的分离，提高了前端开发效率。

MVVM的核心是数据驱动即ViewModel，ViewModel是View和Model的关系映射。ViewModel类似中转站(Value Converter)，负责转换Model中的数据对象，使得数据变得更加易于管理和使用。MVVM本质就是基于操作数据来操作视图进而操作DOM，借助于MVVM无需直接操作DOM，开发者只需完成包含声明绑定的视图模板，编写ViewModel中有业务，使得View完全实现自动化。

The term means "Model of a View", and can be thought of as abstraction of the view.
视图的模型，可将其想象成一个抽象化的视图。

在MVVM中View和Model是不可以直接进行通信的，它们之间存在这ViewModel这个中介充当着观察者的角色。当用户操作View，ViewModel感知到变化，然后通知Model发生相应改变，反之亦然。ViewModel向上与视图层View进行双向数据绑定，向下与Model通过接口请求进行数据交互，起到承上启下的作用。

MVVM

KnockoutJS是最早实现MVVM模式的前端框架之一

MVVM

ViewModel所封装出来的数据模型包含视图的状态和行为两部分，Model的数据模型只包含状态，这样的封装使得ViewModel可以完整地去描述View层。MVVM最标志的特性是数据绑定，MVVM的核心理念是通过声明式的数据绑定来实现View的分离，完全解耦View。

image.png

响应式双向数据绑定的实现原理

1. 脏值检查

AngularJS实现方式

通过脏值检查的方式比对数据是否变更，来决定是否更新视图。最简单的方式是通过setInterval()定时轮询检测数据变动。AngularJS只有在指定事件触发时进入脏值检测。

检查器是一颗树状的结构，当异步事件发生时，脏检查会从根组件开始，自上而下的对子组件进行检查，这种检查的性能存在很大问题。

2. 观察者-订阅者（数据劫持）

VUE的实现方式

• 数据监听器
  Observer将普通的JS对象传递给VUE实例的data选项，Vue将遍历此对象所有属性，并使用Object.defineProperty()方法将属性全部转换成setter和getter方法。当data中的属性被调用访问时，则会调用getter方法。当data中的属性被改变时，则会调用setter方法。

• 指令解析器
  Compiler 的作用是对每个元素节点的指令进行解析，替换模板数据，并绑定对应的更新函数，初始化相应的订阅。

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

• 消息订阅器

Dep内部维护了一个数组，用来执行收集订阅者Watcher，数据变动触发notify()函数，在调用订阅者的update()方法。

VUE image.png