MVVM框架详解

1.背景

        MVVM就是Model-View-ViewModel，它萌芽于 2005 年微软推出的基于 Windows 的⽤户界⾯框架 WPF ，前端最早的 MVVM 框架 knockout 在 2010 年发布。其是一种用于构建用户界面的软件架构模式，宽泛应用于前端和客户端。

2.MVVM本质

        MVVM的本质是解耦。MVVM的主要目标是将应用程序的UI与其底层数据模型分离，通过数据绑定实现数据和UI的自动同步，从而降低代码的耦合度，提高应用程序的可维护性和可测试性。

        它通过将UI逻辑从View中分离出来，将数据处理逻辑从View和Model中分离出来，使得每个组件的职责更加明确，代码更易于组织和维护。ViewModel充当着View和Model之间的桥梁，负责将Model中的数据转换成View可用的形式，并且通过数据绑定将数据自动同步到View上。这种双向绑定使得UI的更新变得自动化，开发者只需要专注于数据的处理和业务逻辑的编写，而无需过多关心UI的更新。

3.MVVM原理

框架原理图

这个图是我按自己的理解画的，如果熟悉这个框架的人看这个图就完全懂了，下面是关于上面这个图的一些名词解释：

大前端：直接面向客户的应用或者系统，可以简单的理解为就是客户端和前端。

Bind：绑定回调，在view层绑定viewmodel的函数。

OnPropChanged：数据变更，Prop就代表view层的各种属性，viewmodel通过OnPropChanged监听view层，做一些业务逻辑，起到一个自动同步的作用。

Subscribe：订阅，即订阅事件，viewmodel调用model层的数据。

OnEvent：事件响应，即model层响应viewmodel的调用，有很多类型的事件，比如广播事件（Event）,点对点事件(P2PEvent)。

Call：回调，就是model层回调Service层的服务。

OnCallback：响应回调，Service将各种服务api打包给model层使用。

下面将介绍图上的各个层级功能和原理，我采用自上而下的方式去理解和讲述：

3.1 View层

View（UI层）：负责UI展示，绑定ViewModel中的属性，触发ViewModel中的行为命令以及呈现由ViewModel提供的数据。一般这一层是用来定义结构、布局，它展示的是 ViewModel 层的数据和状态。View 层不负责处理状态， View层做的是数据绑定的声明、 指令的声明、 事件绑定的声明。

3.2 ViewModel层

ViewModel（视图模型层的业务逻辑）:把View需要的层数据暴露，负责给View提供展示数据，并实现view层的行为指令。 ViewModel 底层会做好绑定属性的监听，通过OnPropChanged自动更新同步。

3.3 Model层

Model(模型层)：是源数据提供者（来自数据库、网络请求等），将Service提供的服务组合成为业务模型并提供给ViewModel使用。

3.4 Service层

这一层其实就是服务器和跨平台层，将数据库、网络请求这些API，包装好给给model层使用。

4.MVVM优缺点

优点：

1.分离视图(View)和模型(Model)，将业务逻辑放在ViewModel层，从而实现了各个组件之间的解耦，降低代码耦合，提⾼视图或者逻辑的重⽤性。

2.⾃动更新 dom: 利⽤双向绑定的核心思想 , 数据更新后视图⾃动更新 , 让开发者从繁琐的⼿动 dom 中解放。

缺点：

1.调试困难，由于数据绑定，Bug可能不易调试，一个问题可能会影响到多个地方，使得定位问题变得复杂。

2.内存消耗，在大型模块中，如果Model长期不释放内存，可能会导致内存消耗增加。

5.MVVM和MVC的区别

MVVM一种基于 MVC 演变而来的架构模式，MVC中Controller演变成MVVM中的viewModel。

两者之间最大的区别就是：MVVM 实现了数据的双向绑定，实现了View和Model的自动同，即视图的变化会自动反映到视图模型和模型中，模型的变化也会实时更新到视图上，大大提高了开发效率和用户体验；而 MVC 通常需要开发者手动处理视图和模型之间的数据同步，属于单向绑定，即模型变化更新视图，视图变化需通过控制器更新模型。

6.回顾总结

上面已经把这个框架给讲的很详细了，请对上面的内容做一个简单的总结：

MVVM，自上到下分析，view层负责UI展示，定义结构、布局等等，ViewModel层负责处理业务，监听view层的变化以及通知去更新，Model层负责提供源数据给ViewModel使用。即通过清晰的分层和双向数据绑定机制，结合使用观察者模式，使得开发人员可以更加专注于业务逻辑的实现，而不必担心UI的更新，从而达到解耦的目的。

使用这个框架写代码需要注意的事项：

1.各层之间的双向数据绑定怎么去实现，这个是使用扩展和扩展点机制并结合使用观察者模式实现的，扩展和扩展点机制本质就是一些类似于宏的名称，去相互协作达到插排和插头的一个效果。

2.ViewModel的生命周期是由View管理的，View的生命周期是由管理者控制的，Model的生命周期是由框架统一管理的。 

感受：

关于这篇文章，我本来想结合代码去讲解的，但我的项目太大了，放代码的话可能更多的读者和初学者看不懂，本篇就主要讲原理了，对于C++的选手，不管是前端还是客户端，还是后端，这个框架都涉及的有，全球有很多用户特别大的软件都使用的是这个框架，要多去学习框架，提升自己的项目代码能力，如果觉得我的文章对你有帮，请点赞收藏加关注，谢谢大家。