让我来告诉你们:MVVM和MVC 到底是啥

251 阅读2分钟

MVVM和MVC

总是能从老师口里听到,或者是一些文章中看到 MVC、MVVM,我抓抓头发,举手表示有着大大的疑惑????

GHEL%`PJAE)KSXAS~PKB6PX.jpg

于是,我搜啊搜,看啊看,稍微稍微总结了一下。下面用的图都是从一些大佬那里拿的,可是我不记得是谁了(🐶头保命)

MVC框架

MVC 全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写。和MVVM都是一种代码的架构设计模式。

(上一张图,这张图我觉得首先颜值就很不错啊)

在这里插入图片描述

  • M:数据管理,从服务器或者数据库拿数据,存数据

  • V:页面

  • C: controller,调用数据,接收V的数据。将M中的数据赋值给V来显示

MVVM框架

这几个字母分别表示:M 模型 ,VM 视图模型 ,V 视图

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。中心思想就是将UI和业务逻辑分开。

vue就是基于MVVM模式来实现的一套框架,它的一个特点:数据的双向绑定(是由VM实现的)

这里有三张图进行解释,从简单到复杂,同志们加油,总有一张能看懂😁

img

img

在这里插入图片描述

  • M:数据管理者,负责数据的存和取。保存着每个页面中单独的数据

  • VM:调度者,将M和V分割。数据的解析。

  • V:展示的页面(html+css)

其中 视图模型VM 是 MVVM 模式的核心

MVVM 和 MVC 的区别

MVC中的 C :是把 M 中的值赋给 V。但是它被设计的时候并没有考虑到数据解析这个步骤。它被设计出来的功能有:

-   管理自己的生命周期
-   处理controller之间的跳转
-   实现controller容器
  • MVC中,C 是完全持有 M 的,就像你是公司的总裁,但是公司小,所以什么都要你来亲自管,要管理过程+结果。

  • MVVM中, C是持有 VM的,而 VM持有 M。就像等以后公司大了,有VM(你的副总裁,总经理deng....),那你就不用管这么多。只需要管结果,不需要过程。VM来搞过程。不过,我们要知道,controller还是存在的,在VM中,只是存在感被完全降低了。

  • 总结

1.MVVM是通过数据来驱动页面的。而MVC是通过节点操作。 2.MVVM中的model和view不会直接进行交互的,是通过中间桥梁VM来达到同步。而MVC中model和view可以直接交互。 3.MVVM解决了MVC中的 ‘大量DOM操作造成的 页面渲染性能降低,加载速度变慢,影响用户体验’ 等问题