前端MVVM模式

一.什么是MVVM模式

MVVM，是Model-View-ViewModel的简写，是M-V-VM三部分组成。早期的设计模式为MVC，而MVVM是在MVC的基础上进行改进后的设计模式。MVVM 就是将其中的View 的状态和行为抽象化，其中ViewModel将视图 UI 和业务逻辑分开，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

MVVM核心思想是可以让MVVM框架利用自己的机制自动更新DOM，也就是所谓的数据-视图分离，数据不会影响视图。采用双向数据绑定，view中数据变化将自动反映到viewmodel上，反之，model中数据变化也将会自动展示在页面上。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

二.MVVM模式的优点

（1）低耦合。在后端接口提供前可完成Controller和View的开发工作。视图可以独立于Model变化  和修改。

（2）可复用。可以把一些视图逻辑放到一个ViewModel里面，让很多View重用这段视图逻辑。

（3）独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

（4）可测试。由于ViewModel把逻辑分离出来，测试可以针对ViewModel来写。

三.缺点

（1）相较于MVC模式，MVVM有更多的代码量

（2）需对每个Controller实现绑定，这是分离不可避免的工作量。

四.经常应用的场景

（1）微信小程序

（2）Vue.js

（3）AngularJS

（4）ReactJS

五.组成部分

  View 层：用户界面，主要由HTML和CSS 来构建

  Model层：是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统  展开

  ViewModel 层：是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型