MVVM起步

什么是MVVM？

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式

为什么会出现 MVVM 呢？

首先介绍一下MVC

MVC 即 Model-View-Controller 的缩写，就是 模型—视图—控制器，也就是说一个标准的Web 应用程式是由这三部分组成的：

• View ：用来把数据以某种方式呈现给用户
• Model ：数据
• Controller ：接收并处理来自用户的请求，并将 Model 返回给用户

在HTML5 还未火起来的那些年，MVC 作为Web 应用的最佳实践是OK 的，这是因为 Web 应用的View 层相对来说比较简单，前端所需要的数据在后端基本上都可以处理好，View层主要是做一下展示，那时候提倡的是 Controller 来处理复杂的（前后端）业务逻辑，所以View层相对来说比较轻量，就是所谓的瘦客户端思想。

随着HTML5的发展，View 层所做的事，就不仅仅是简单的数据展示了，它不仅要管理复杂的数据状态，还要处理各种操作行为。因此，前端也需要工程化，也需要一个类似于MVC 的框架来管理这些复杂的逻辑，使开发更加高效。

起初，只是改进了MVC，MVVM并没有出现，改进后的MVC：

• View ：UI布局，展示数据
• Model ：接口数据
• Controller ：响应用户操作，并将 Model 更新到 View 上（由前端处理交互）

这种 MVC 架构模式对于简单的应用来看是OK 的，也符合软件架构的分层思想。 但实际上，随着H5 的不断发展，前端应用的复杂程度已不同往日。这时前端开发就暴露出了三个痛点问题：

• 开发者在代码中大量调用相同的 DOM API，处理繁琐 ，操作冗余，使得代码难以维护。
• 大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
• 当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致 Model 发生变化，开发者同样需要将变化的数据同步到Model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

早期jquery 的出现就是为了前端能更简洁的操作DOM 而设计的，但它只解决了第一个问题，另外两个问题始终伴随着前端一直存在。

MVVM 的出现，完美解决了以上三个问题。

MVVM 由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，对于Vue来说Model层指的是Vue中的data函数，或者干脆理解为后端提供的数据；View 代表视图，也就是我们看到的页面。viewModel一般指代逻辑代码，比如说通过数据绑定改变View，通过交互改变Model

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互

不管是Model=》ViewModel=》View（通过ViewModel将Model层的初始数据传给View层，View层获得数据后展示到页面上）还是View=》ViewModel=》Model（通过ViewModel把View层与用户的交互，比如说点击事件，滚动事件等，所变化的数据传给Model层），全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题和复杂数据状态的维护问题，这些完全由 MVVM 来统一管理。