MVVM 浅谈MVVM优缺点

首先，我们来谈谈MVVM的起源。相信大家都很熟悉MVC。MVC是开发客户端最经典的设计模式，但是MVC也有让人不能忽视的严重问题。在一般开发中，除了简单模型和视图之外的所有部分都放在控制器中。控制器负责显示界面、响应用户操作、网络请求和与模型交互。随着业务逻辑的增加，控制器的处理逻辑会越来越复杂，控制器会慢慢变胖，使得控制器的逻辑变得复杂，难以维护。为了更好地管理代码，更方便地拓展业务，精简控制器，MVVM将脱颖而出。

MVVM:是模型-视图-视图模型的缩写

M: m对应MVC

V:对应MVC的V

虚拟机:视图模型在MVC中将控制器的数据加载和处理功能分开

MVVM是一个非常流行的网络前端开发模式。有了MVVM，我们的代码可以专注于业务逻辑，而不是DOM操作。目前，著名的MVVM框架包括vue、avalon、angular等。这些框架各有千秋，但实现思路基本相同:数据绑定和视图刷新。像MVC一样，主要目的是将视图和模型分开。视图可以独立于模型进行更改和修改，视图模型可以绑定到不同的“视图”。当视图改变时，模型可以保持不变，当模型改变时，视图也可以保持不变。在MVVM，数据是核心。由于视图模型和视图之间的双向绑定，视图模型中的数据将同步到DOM中。我们通过DOM事件监控用户对DOM的更改，并同步到ViewModel。

MVVM设计模式的优势

1.双向绑定技术，当模型改变时，视图-模型会自动更新，视图也会自动改变。数据一致性好，不用担心，模块中的这一块数据是这个值，另一块是另一个值。因此，MVVM模式有时被称为模型-视图-绑定模式。

2.View的功能进一步加强，具有一定的控制功能。如果你想无限增强它的功能，甚至控制器的几乎所有功能都可以迁移到每个视图。视图可以像控制器一样有自己的视图模型。

3.由于控制器的功能大多移到View进行处理，控制器大大减少。不用担心看到庞大的控制器逻辑。

4.可以从视图或视图控制器的数据处理部分抽象出一个函数来处理模型。这样一来，他们专攻页面布局和页面跳转，势必会进一步简化。

MVVM设计模式的缺陷

1.数据绑定使得bug难以调试。你看界面不正常。可能是您的视图代码中有错误，或者模型代码有问题。数据绑定使得一个位置的bug可以快速转移到其他位置，而要定位原来的问题就不那么容易了。

2.大模块中的模型会很大，虽然使用方便，保证了数据的一致性。那时候如果长时间持有，不释放的话会耗费更多内存。

3.数据的双向绑定不利于代码重用。客户端开发中最常用的重用是视图，但是数据双向绑定技术使您能够将一个模型绑定到每个视图，不同的模型是不同的。您不能简单地重用视图。

这篇文章最初是由H5前端讲师在源代码时代创作的！

转载必须注明出处！谢谢合作！