MVVM架构学习

一、MVVM简介

是一种软件架构模式，是MVC的改进版，MVVM将其中View的状态和行为抽象化，让我们将视图的UI和业务上的逻辑进行分开。

简单来说，MVVM是Model-View-ViewModel的简写，即是模型-视图-视图模型。

 

model - 模型

指的是后端传过来的数据。

view - 视图

指的是所有看到的页面，可以理解为将数据以某种方式呈现给用户。

ViewModel

指的是视图模型，他是连接view和model的桥梁。

从上面的图片可以大致看到，有两个不同的方向。

1.模型-->视图

解析：将后端数据转换为前端的页面。实现的方式是数据绑定。

2.视图-->模型

解析：将前端页面转换为后端数据的实现方式：叫做Dom数据监听。

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

更深层次了解MVVM，我们需要了解MVC架构，从MVC来理解MVVM演变和出现。

二、MVC是什么？

MVC的全称是Model View Controller。MVC是Model-View-Controller的简写。MVC的目的是讲M和V的代码进行分离，且MVC是单向通信，即View和Model，必须是通过Controller来承上启下，Controller指的是页面的逻辑，他对用户的请求进行接收，并将Model返回给用户。

三、ViewModel和Controller的关系

MVC与MVVM的区别

有人会产生疑惑，是不是VM取代了C呢？其实并不是这样子，因为ViewModel存在的目的是为了抽离Controller中展示的业务逻辑，而不是取代Controller，其他视图操作的业务还是放到Controller中实现。也就是说MVVM实现的是业务逻辑组件的重用。

四、MVC的问题

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

但是在过去的10年时间中，我们已经把许多传统服务器的代码，从服务器端放到浏览器当中，这样子就产生了成千上万行的JavaScript代码，他们连接了各式各样的HTML、CSS，但是缺乏正规的组织形式，这就是越来越多的前端开发者使用JavaScript框架了，如angular、vue等。

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

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

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

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

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

五、MVVM对MVC的完善

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

在MVVM架构下，View和Model没有直接的联系，而是通过ViewModel进行数据交互，Model和ViewModel之间的交互是双向的，因此View数据的变化会同步到Model中，Model数据的变化也会立即反应到View上面。

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

总结

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