MVVM模式

MVVM模式，顾名思义即 Modal-View-ViewModal模式。一句话概括就是操作数据，就是操作识图，就是操作DOM。(所以无需操作DOM，操作数据就可以了)。

借助 MVVM 框架，开发者只需完成包含 声明绑定 的视图模板，编写 ViewModel 中业务数据变更逻辑，View 层则完全实现了自动化。这将极大的降低前端应用的操作复杂度、极大提升应用的开发效率。

MVVM 最标志性的特性就是 数据绑定 ，MVVM 的核心理念就是通过 声明式的数据绑定 来实现 View 层和其他层的分离。

MVVM，说到底还是一种分层架构。它的分层如下：

· Model: 域模型，用于持久化

· View: 作为视图模板存在

· ViewModel: 作为视图的模型，为视图服务

Model 层

Model 层，对应数据层的域模型，它主要做域模型的同步。通过 Ajax/fetch 等 API 完成客户端和服务端业务 Model 的同步。在层间关系里，它主要用于抽象出 ViewModel 中视图的 Model。

View 层

View 层，作为视图模板存在，在 MVVM 里，整个 View 是一个动态模板。除了定义结构、布局外，它展示的是 ViewModel 层的数据和状态。View 层不负责处理状态，View 层做的是 数据绑定的声明、 指令的声明、 事件绑定的声明。

ViewModel 层

ViewModel 层把 View 需要的层数据暴露，并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责，也就是处理 View 层的具体业务逻辑。ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化，View 层会得到更新；而当 View 中声明了数据的双向绑定（通常是表单元素），框架也会监听 View 层（表单）值的变化。一旦值变化，View 层绑定的 ViewModel 中的数据也会得到自动更新。

MVVM图示

MVVM框架的工作：

视图引擎：为 View 层作为视图模板提供强力支持，开发者，不需要操作 DOM ，丢给引擎来做！

数据存取器：通过 Object.defineProperty() API 轻松定义，或通过自行封装存取函数的方式曲线完成。存取器内部往往封装了发布/订阅模式，以此来完成对数据的监听、数据变更时通知更新。它是数据绑定实现的基础。

组件机制：有追求的开发者往往希望按照面向未来的组件标准 － Web Components 的方式开发，这机制为了满足开发者的追求而生。MVVM 框架提供组件的定义、继承、生命周期、组件间通信机制，为开发者面向未来开发点亮明灯。