MVVM框架详解

MVVM框架详解

引用

CSDN

1.

https://blog.csdn.net/Chasing___dream/article/details/141886586

1.背景

MVVM（Model-View-ViewModel）是一种用于构建用户界面的软件架构模式，最早可以追溯到2005年微软推出的基于Windows的用户界面框架WPF。前端最早的MVVM框架Knockout在2010年发布。这种架构模式广泛应用于前端和客户端开发。

2.MVVM本质

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

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

3.MVVM原理

框架原理图

这个图展示了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层不负责处理状态，主要做数据绑定、指令声明和事件绑定的声明。

3.2 ViewModel层

ViewModel（视图模型层）负责给View提供展示数据，并实现View层的行为指令。ViewModel会监听View层的变化并通过OnPropChanged实现自动更新同步。

3.3 Model层

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

3.4 Service层

这一层主要负责服务器和跨平台服务，将数据库、网络请求等API包装好供Model层使用。

4.MVVM优缺点

优点

1. 分离视图和模型：将业务逻辑放在ViewModel层，实现了各个组件之间的解耦，降低了代码耦合度，提高了视图或逻辑的重用性。
2. 自动更新DOM：利用双向绑定的核心思想，数据更新后视图自动更新，让开发者从繁琐的手动DOM操作中解放出来。

缺点

1. 调试困难：由于数据绑定，Bug可能不易调试，一个问题可能会影响到多个地方，使得定位问题变得复杂。
2. 内存消耗：在大型模块中，如果Model长期不释放内存，可能会导致内存消耗增加。

5.回顾总结

MVVM框架通过清晰的分层和双向数据绑定机制，结合观察者模式，使得开发人员可以更加专注于业务逻辑的实现，而不必担心UI的更新，从而达到解耦的目的。在使用时需要注意以下事项：

1. 双向数据绑定的实现机制，这通常通过扩展和扩展点机制结合观察者模式来实现。
2. 各层的生命周期管理：ViewModel的生命周期由View管理，View的生命周期由管理者控制，Model的生命周期由框架统一管理。

MVVM框架在前端和客户端开发中应用广泛，许多大型软件都在使用这种架构模式。掌握MVVM框架对于提升项目代码能力具有重要意义。