MVVM框架设计模式的简单理解

Posted 2020-11-26 leejoyful

1.什么是MVVM?

　1.1 核心思想：双向绑定-数据变化视图跟着自动变化；大都采用声明式编程而非命令式。

　1.2 设计模式：

　　Model–View–ViewModel是一种软件架构设计模式，这些模式也是依次进化而形成MVC—>MVP和MPF—>MVVM，是一种简化用户界面的事件驱动编程形式。

　　MVVM 源自于经典的 Model–View–Controller（MVC）模式  ，MVVM 的出现促进了前后端逻辑分离，提高了前端开发效率，MVVM 的核心是 ViewModel 层，它就像是视图层和数据层的桥梁；ViewModel 层向上与view层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。

2.MVVM的优点

　　2.1 viewModel桥梁的出现让类似-河水两岸的陆地连接(view/model)，两地分而治之便可实时传输又互不干扰；即第一个优点便是视图层低耦合：前端开发者不必低效通过频繁操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，开发者只需要处理和维护 ViewModel，一个ViewModel可以绑定到不同的"View"上。当View变化的时候Model可以不变，当Model变化的时候View也可以不变。这个解耦是至关重要，也是前后端分离方案实施的重要一环。

　 2.2 上面提到的一个ViewModel可以绑定到不同的"View"上，你可以把视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑，即可重用性。

    2.3 交给前端工程师可单独开发，开发人员可以专注于 ViewModel 的开发，设计人员可以专注于页面设计，通过相应的规API可以简单的进行整合。

　  2.4 测试和部署，针对页面控件来写比较方便测试也可以不依赖后端直接用工具或者模拟数据进行测试。

3.MVVM的组成部分

　3.1 View 层

　　View 是视图层，就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的也就是用户界面，前端主要由 html 和 CSS 来构建 。

　3.2 Model 层

　　Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据为中心，对于前端来说就是后端提供的API接口。

　3.3 ViewModel 层

　　ViewModel 是由前端开发人员开发和维护的视图数据层。前端开发者对从后端获取的 Model 数据进行转换处理，数据做第二次封装，以生成符合 View 层使用结构的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示内容，而页面加载进来时发生的交互，点击这一块发生事件，滚动时触发的事件这些都属于行为，视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去展现 View 层的整体界面内容。