傲娇大少之——【MVVM】

我好想得了暴食症，治不好的那种……

咱也聊一下MVVM

MVVM（Model-View-ViewModel），一种前端架构模式，由MVC衍生出来的，所以咱还是先了解一下MVC。

MVC

MVC（Model-View-Controller）是最常见的架构模式之一。使用非常广泛，最为著名的应该就是使用MVC模式的JavaEE了。

首先，MVC不是框架，不是架构，不是设计模式，而是一种架构模式。就是你设计这个架构依赖的基本思想，指导我们如何组织代码，如何解决显示与数据分离的问题等。

简单说一下MVC：

M：Model（模型）
V：View（视图）
C：Controller（控制器）

看百度百科上的图，非常清晰：

从上图可以看出，各模块的作用哈：

视图（view）：用于展示数据，给用户看的。
模型（Model）：封装数据以及逻辑。接收控制器的请求，并做响应，返回给视图层。
控制器（Controller）：处理用户的输入，调用Model层。

优点是做到了两个分离：

• model和view的分离
• view和controller的分离

WEB MVC

web mvc范围更小一些，主要指的是web应用之类的。例如Java的structs框架。

流程如下图（网上找的）：

可以看到与传统的MVC的不同点：

Controller和Model之间是双向的。即Controller处理用户输入后，调用Model的数据逻辑层，然后不是直接返回到视图层了而是继续返回给Controller，然后通过Controller将响应显示到视图层。

MVVM

MVVM属于MVC的改进版，当然中间还有个模式MVP，感兴趣的去看https://www.cnblogs.com/rainbow70626/p/4926121.html，这里主要说MVVM。

MVVM是Model-View-ViewModel的简写，即M-V-VM。

MVVM层实现了前后端更好的分离（前端需要的数据只需要请求后端的接口即可），目前很多主流前端框架都使用了这种架构模式，比如Vue，Angular等。

以下内容来自：https://www.cnblogs.com/iovec/p/7840228.html，主要是人家写的太好了，无法超越……

MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。如下图所示：

简单画了一张图来说明 MVVM 的各个组成部分：

分层设计一直是软件架构的主流设计思想之一，MVVM 也不例外。

• M （Model）：数据模型层，泛指后端各种业务逻辑处理和数据操控，主要围绕数据库系统展开。
• V （View）：视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建，为了更方便地展现 ViewModel 或者 Model 层的数据，已经产生了各种各样的前后端模板语言，比如 FreeMarker、Marko、Pug、Jinja2等等，各大 MVVM 框架如 KnockoutJS，Vue，Angular 等也都有自己用来构建用户界面的内置模板语言。
• VM （ViewModel）：是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，那一块展示什么这些都属于视图状态（展示），而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。由于实现了双向绑定，ViewModel 的内容会实时展现在 View 层，这是激动人心的，因为前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新，真正实现数据驱动开发。看到了吧，View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

回来！

所以！重点，也就是我的理解来了哈！

1. MVVM架构模式实现了最大限度的前后端分离。
2. ViewModel实现了响应式，双向数据绑定；
3. 修改View层，Model对应数据发生变化。
4. Model数据变化，不需要查找DOM，直接更新View。
5. 实现了View和Model层真正的解耦。

想要了解的更透彻，推荐读这个：https://blog.csdn.net/dwfrost/article/details/85777900

本文参考：
https://www.imooc.com/article/1022
https://www.cnblogs.com/iovec/p/7840228.html