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

前言

大家一说起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会有不同的解释，但是原理和思想上是一致的。

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