本文探讨如下几个问题：
在「什么是架构模式和架构风格」一文中，对架构模式的定义是：
Architecture Pattern: { Problem, Context } → architecture approach;
架构模式描述了一组组件之间的关系，用以解决特定上下文内的某个常见的架构问题
MVC和MVVM都是架构模式！
可以看出MVC和MVVM都是为了解耦「界面」和「业务逻辑」，只是解决方案不同！也可以说MVVM是MVC的一种变体(ViewModel+Binder可以说是Controller的一种实现方式)，或者衍生！
我们先说，为什么要解耦「界面」和「业务逻辑」？
早期的界面系统开发时，展示逻辑与数据是糅合在一起的！以早期的Java为例，所有的展示逻辑和业务逻辑都写在了Servlet/JSP中，导致了：
MVC将系统拆分为控制器、视图和模型来解决上面的问题：
Wiki给出了一个Js模拟的MVC模式代码，能更清晰的理解三者之间的关系：
/** 模拟 Model, View, Controller */
var M = {}, V = {}, C = {};
/** Model 负责存放数据 */
M.data = "hello world";
/** View 负责将资料展示出来 */
V.render = (M) => { alert(M.data); }
/** Controller 作为M和V的桥梁 */
C.handleOnload = () => { V.render(M); }
/** 在页面加载的时候调用Controller*/
window.onload = C.handleOnload;这样的拆分，提高了系统的：
而MVVM模式将系统拆分为视图、模型和视图模型以及绑定器来解决耦合问题：
ViewModel和Binder的关系就像Java里的注解与注解处理器之间的关系：注解只是标示了某个字段、方法或某个类应该具备什么属性；注解处理器根据注解，对被注解的字段、方法或某个类来进行实际的处理。
这样的拆分，与MVC模式一样，提高了相同的系统属性，只是方式有一些差异：
SpringMVC是目前使用比较广泛的MVC框架！它是MVC与「前端控制器」的混合体！
前端控制器模式（Front Controller Pattern）是用来提供一个集中的请求处理机制，所有的请求都将由一个单一的处理程序处理。该处理程序可以做认证/授权/记录日志，或者跟踪请求，然后把请求传给相应的处理程序。前端控制器包含如下组件：
前端控制器（Front Controller）：处理应用程序所有类型请求的单个处理程序，应用程序可以是基于 web 的应用程序，也可以是基于桌面的应用程序。
调度器（Dispatcher）：前端控制器可能使用一个调度器对象来调度请求到相应的具体处理程序。
视图（View）：视图是为请求而创建的对象。
在SpringMVC中：
SpringMVC的前端控制器做了很多事情，结构如下图：
Vue实现的是MVVM模式！
在Vue中：
一个简单的Vue代码如下：
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset="utf-8"/>
<title>Hello world</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">{{content}}</div>
<script>
var app = new Vue({
el:‘#app‘, //vue实例处理哪个dom
data:{ //定义
content:‘hello world‘
},
methods:{
fetchData: function() {
// 获取数据
}
}
});
</script>
</body>
</html>下图是Vue的生命周期：
Vue对象就是ViewModel，它声明了：
在上面有三处提到了Model和Controller，这三处的Model和Controller并不完全相同！
三处Model：
三处Controller：
原文：https://www.cnblogs.com/cheng88/p/10098629.html