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
响应式双向数据绑定的实现原理
- 脏值检查
AngularJS实现方式
通过脏值检查的方式比对数据是否变更，来决定是否更新视图。最简单的方式是通过setInterval()定时轮询检测数据变动。AngularJS只有在指定事件触发时进入脏值检测。
检查器是一颗树状的结构，当异步事件发生时，脏检查会从根组件开始，自上而下的对子组件进行检查，这种检查的性能存在很大问题。
- 观察者-订阅者（数据劫持）
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
