前言

相信大家们在写项目或平时学习的时候或多或少听过 MVVM 这个架构，那么MVVM实际是一个什么东西呢，下面就让我们来简单了解一下它

一. MVVM是什么？

1. MVVM简介

MVVM（Model–View–Viewmodel）是一种软件架构模式，是MVC的改进版，MVVM 将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。它由微软架构师Ken Cooper和Ted Peters开发，通过利用WPF（微软.NET图形系统）和Silverlight（WPF的互联网应用派生品）的特性来简化用户界面的事件驱动程序设计。简单来说，MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型，我们来一点一点的解析它。

2. MVVM的结构

【model 模型】指的是后端传递的数据。
【view 视图】指的是所看到的页面，亦可以理解为将数据以某种方式呈现给用户
【Viewmodel 视图模型】mvvm模式的核心，它是连接view和model的桥梁

从上图可以看到，它大致有两个方向

模型 -> 视图
解析：将后端数据转化为前端页面实现方式：数据绑定
视图 -> 模型解析：将前端页面转化为后端数据实现方式：DOM事件监听

存在两个方向都实现的情况，叫做数据的双向绑定

到这里，我们已经大概了解了MVVM的结构，要更深层次的认识MVVM，我们就需要先了解MVC架构，从MVC来理解MVVM的演变与出现

二. MVC 是什么

1. MVC简介

MVC全名是Model View Controller，MVC是Model-View- Controller的简写，即模型-视图-控制器， MVC的目的就是将M和V的代码分离，且MVC是单向通信，即 view和model，必须通过Controller来承上启下。Controller指的是页面业务逻辑，它接收并处理来自用户的请求，并将 Model 返回给用户

2. ViewModel 与Controller

看到这里，可能大家会想到 MVC 与 MVVM 的区别是不是 VM 取代了 C 呢？实际上并不是这样，因为ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller，其它视图操作业务等还是应该放在Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用

3. MVC的问题

MVC 架构模式只能能够满足轻量级的应用开发，在过去可以满足开发者的开发需求

但是在过去的10年中，我们已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的javascript代码，它们连接了各式各样的HTML 和CSS文件，但缺乏正规的组织形式，这也就是为什么越来越多的开发者使用javascript框架。比如：angular、react、vue。

浏览器的兼容性问题已经不再是前端的阻碍。但是随着HTML5的发展，HTML5开发的应用由于越来越趋近于原生APP，这就导致HTML5的应用越发庞大与复杂，这就使得MVC架构已经无法满足和解决开发需求了。前端的项目越来越大，项目的可维护性和扩展性、安全性等成了主要问题。

当年为了解决浏览器兼容性问题，出现了很多类库，其中最典型的就是jquery。但是这类库没有实现对业务逻辑的分成，所以维护性和扩展性极差。导致出现三个问题

开发者在代码中大量调用相同的 DOM API，处理繁琐，操作冗余，使得代码难以维护

大量的DOM 操作使页面渲染性能降低，加载速度变慢，用户体验差

难以维护复杂多变的数据状态：当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中

这些性能难题一直困扰着开发者，直到MVVM的出现

三. MVVM 对于 MVC 的完善

MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。

当然，这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。

MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。

它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。上面我们提到了，在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

四. 总结

MVVM模型的好处是，除了获得分离之外，还可以实现模型与视图之间的隔离。MVVM模型的功效是获得一个无需查看即可轻松更改的一致模型。实施MVVM的重要关键要素是可测试性，可维护性和可扩展性。 MVVM的对于模型与视图的隔离，大大方便了开发者对于数据状态的维护与管理

浅谈MVVM架构

前言