理解MVC和MVVM架构（以JavaWeb和Vue举例）

Posted 2023-04-02 @大吉

前言

大家一说起MVC 都知道，但是和MVVM一对比就搞混了。下面分别以JavaWeb对MVC进行举例，以Vue来对MVVM进行举例。争取搞清楚MVC和 MVVM。

MVC模式（偏后端，以JavaWeb举例）

MVC模式是更偏向于JavaWeb后端的一种设计模式。 在我之前的文章中有讲过该模式和SSM框架的关系。下面给出文章链接：

MVC架构、SSM框架的关系

下面两张图截取自上文，详情可直接移步该博客

MVVM模式（偏前端，以Vue举例）

由于该模式更加偏向于前端概念，如果想看懂该模式，必须懂一点前端的知识。这里仅以Vue为例。

一图说清MVVM（图来源自尚硅谷课件，本人进行二次加工）：

在代码中体现上图中的Data Bindings（通过VM，将M绑定到View）：

在代码中体现上图中的DOM Listeners（通过VM，将V绑定到M）：

执行效果：

同时做到了将M绑定到V，和V绑定到M，就是实现了双向绑定。

VM（就是ViewModel），其实就是Vue实例本身，它负责将View和Model绑定起来

这就是Vue的MVVM体现！要理解透彻，需要对ViewModel，双向绑定，Vue实例都有详细的理解。其它前端框架对MVVM有不同的解释，但是原理和思想上是一致的。

最后看维基百科对其的定义：

后记

本文只以JavaWeb体现了MVC架构，以Vue体现了MVVM架构。其它技术栈对MVC和MVVM会有不同的解释，但是原理和思想上是一致的。

以上是我的个人见解，欢迎大家讨论，指正。

MVC和MVVM的区别 & vue的虚拟DOM的理解

参考技术A MVC: M,即model,指数据层 V,指view, 即视图层 C, controller,控制器
View层发起数据请求，Controller层接到请求后，接收参数，把命令传向Model层，Model层处理数据后，把数据传回controller,而controller把数据传回客户端，也就是view层
典型代表： nodejs的Egg框架， php的ThinkPHP框架都是使用的MVC模式
MVVM: M: model,数据层 V: view，视图层，即UI , VM （ViewModel）是视图层和数据层的中间层
典型代表： Vue框架
Vue的双向数据绑定就得益于MVVM框架， 视图层改变，底层封装好的VM层会更新数据，而数据改变，VM层会更新视图

一、虚拟DOM就是一个JS对象，用它来描述真实DOM
二、为什么要用虚拟DOM
越多的真实dom操作，越损耗性能
而用虚拟dom操作数据要大大的减少性能损耗，提高渲染效率
二、虚拟DOM的渲染流程
1、获取数据
2、根据数据创建VDOM （相当于给对象赋值）
3、根据VDOM渲染生成真实DOM ( 根据createElement(‘DIV’) )
4、当数据发生改变后，又会生成新的VDOM
5、通过 diff 算法 比对 多次生成的 VDOM, 将不同的内容比对出来，然后再进行真实DOM渲染，
一样的内容是不会进行渲染的，这就是VDOM 的 ‘就地复用’ | ‘惰性原则’