VUE中的MVVM的变化历程

Love The Way You Lie 2023-06-22 08:26 5阅读 0赞

不管是前端还是后端，说到底，就是通过分层，把复杂耦合的内容变得简单。从起初的三层UBD，到七层UI--Facade-BLL-IDAL-DAL-Factory-Entity,到我们后来接触的MVC，WCF，SSH，SSM，SpringBoot，都是这个目的。

VUE是我们常用的前端框架，基于MVVM架构的思想，而MVVM是从MVC上改进过来的，想要学习MVVM就要再回顾一下MVC

# 一、MVC：（Model-View-Controller） #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70][]

## **    1、MVC出现的历程：** ##

有了JavaScript后，浏览器就可以运行JavaScript，然后，对页面进行一些修改。JavaScript还可以通过修改HTML的DOM结构和CSS来实现一些动画效果，而这些功能没法通过服务器完成，必须在浏览器实现。

用JavaScript在浏览器中操作HTML，经历了若干发展阶段：

第一阶段，直接用JavaScript操作DOM节点，使用浏览器提供的原生API：

第二阶段，由于原生API不好用，还要考虑浏览器兼容性，jQuery横空出世，以简洁的API迅速俘获了前端开发者的芳心：

第三阶段，MVC模式，需要服务器端配合，JavaScript可以在前端修改服务器渲染后的数据。

现在，随着前端页面越来越复杂，用户对于交互性要求也越来越高，想要写出复杂多功能页面，仅仅用jQuery是远远不够的。MVVM模型应运而生。

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

## 2、每一层的含义： ##

*  **Model（模型）** - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。
 *  **View（视图）** - 视图代表模型包含的数据的可视化。
 *  **Controller（控制器）** - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。

# 二、从MVC怎么到了MVVM呢？ #

参考：

MVC--MVVM的历程： [https://www.jianshu.com/p/b0aab1ffad93][https_www.jianshu.com_p_b0aab1ffad93]

MVC--MVP--MVVM： [https://www.jianshu.com/p/eb48aef3a8af][https_www.jianshu.com_p_eb48aef3a8af]

MVC--MVVM中Model的不同： [https://www.zhihu.com/question/28893576][https_www.zhihu.com_question_28893576]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 1][]

###   为什么不是MVCVM呢？ ###

**Controller被弱化掉了：**

1）、在MVVM中，Controller不再像MVC那样直接持有Model了。

小故事：想象Controller是一个Boss，数据是一堆文件（Model），

如果现在是MVC，那么数据解析（比如整理文件）需要由Boss亲自完成，然而实际上Boss需要的仅仅是整理好的文件而不是那一堆乱七八糟的整理前的文件。

所以Boss招聘了一个秘书，现在Boss就不再需要管理原始数据（整理之前的文件）了，

他只需要去找秘书：你帮我把文件整理好后给我。那么这个秘书就首先去拿到文件（原始数据），然后进行整理（数据解析），接下来把整理的结果给Boss。

所以秘书就是VM了，并且Controller（Boss）现在只需要直接持有VM而不需要再持有M了。

2）、 如果再进一步理解C、VM、M之间的关系：因为Controller只需要数据解析的结果而不关心过程，所以就相当于VM把“如何解析Model”给封装起来了，C甚至根本就不需要知道M的存在就能把工作做好，前提它需要持有一个VM。

那么我们MVVM中的持有关系就是：C持有VM，VM持有M。

# 三、怎么理解MVVM呢？ #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 2][]

## 1、MVVM在代码中的具体体现： ##

参考：在代码中的体现： [https://yq.aliyun.com/articles/610059][https_yq.aliyun.com_articles_610059]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 3][]

**参考：[https://blog.csdn.net/xml1996/article/details/103549077][https_blog.csdn.net_xml1996_article_details_103549077]**

## 2、MVVM只针对前端的框架，那是怎么和后端数据进行交互的呢？ ##

图（统一出口）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 4][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191215151454609.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY=,size_16,color_FFFFFF,t_70
[https_www.jianshu.com_p_b0aab1ffad93]: https://www.jianshu.com/p/b0aab1ffad93
[https_www.jianshu.com_p_eb48aef3a8af]: https://www.jianshu.com/p/eb48aef3a8af
[https_www.zhihu.com_question_28893576]: https://www.zhihu.com/question/28893576
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191215151456805.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/201912151515021.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY=,size_16,color_FFFFFF,t_70
[https_yq.aliyun.com_articles_610059]: https://yq.aliyun.com/articles/610059
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2019121515150296.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY=,size_16,color_FFFFFF,t_70
[https_blog.csdn.net_xml1996_article_details_103549077]: https://blog.csdn.net/xml1996/article/details/103549077
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191215151456861.jpeg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3htbDE5OTY=,size_16,color_FFFFFF,t_70