MVC与MVVM模式的理解

最新推荐文章于 2025-07-02 13:23:39 发布

leon_smart

最新推荐文章于 2025-07-02 13:23:39 发布

阅读量612

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： MVC MVVM MVC与MVVM的区别

本文链接：https://blog.youkuaiyun.com/leon_smart/article/details/88636292

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了MVC和MVVM模式。MVC由view、model和controller组成，controller协调view和model。随着交互需求增加，MVC的controller变得臃肿，于是诞生了MVVM。MVVM是MVC的升级版，通过双向数据绑定提升性能，如vue框架，实现了前后端分离。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

序

前段时间比较忙，这次开始尝试写一些vue框架的介绍，首当其冲就会涉及MVVM模式，提起MVVM我们同时可以联想到MVC 这个问题不论是学习过程或者是面试都有可能遇到，其次了解好这其中的细节也便于我们更好的学习框架

MVC

之前我们使用nodejs +express + mysql/mongodb 这样的组合其实都是典型的MVC的设计典范，我们来联想前后端的分工我们发现，所有的APP说白了就是在一个数据和用户的交互，我们让数据直接或者经过算法等各种方式展示给用户，而用户通过操作对数据进行限制范围内的增删改查来改变数据。这是我们用面向对象的角度去思考，需要什么就创造什么。需要渲染视图层就诞生了view,需要管理数据就诞生了model，但这两个层级中间是没有任何关系的，model中不会涉及view的内容，反之亦然。因此就出现了一个新的类controller。

view

顾名思义就是视图，就是浏览器渲染给我们看到的内容。它有动态的有静态的，静态就是我们基本不会变化的内容，而动态的就是会根据数据进行改变。

model

模型，我们一般叫做数据模型，它就是数据的管理者，它负责对数据进行获取和存放，但它并不直接使用数据，而是给controller（真正的使用者），提供接口即可。

controller

controller说白了就是m和v的协调中间环节，他将m的数据处理赋值给v渲染展示给用户，又将v中用户输入的数据处理在m中存放或是修改，很像以前语文的一种说法承上启下
在这里插入图片描述
可能很多老铁在查看资料时会看过这张图片，出自斯坦福大学公开课。
这是流传比较广泛也是非常清晰明白显示MVC之间关系的图片。
MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。
V和C的交互
表单输入事件，是用户在V操作，但是处理这个事件的应该是C，所以V把这个事件传递给了C，但其实V只负责传递出去，它不会在意是谁接收（但这里我们规定是C接收），会怎么处理。就跟我们快递小哥一样他只负责把快递送到地址，至于收到人是谁，干什么就不在工作范围里了

M和C的交互
M只负责跟数据相关的操作,例如有初始化数据库,获取数据方法fetch(),保存数据的方法save()
而C在作为中间者他只要告诉他去存在V中获取的数据（经过C处理过）或者去取相应的数据（同样要经过C处理）然后给V。

MVVM

随着互联网的发展，用户对于交互性的要求越来越高，单纯的MVC已经渐渐不能满足需求了，我们把大量的交互处理都交给C来处理，而这些处理随着时代的发展越来越复杂，C就变得越来越臃肿，
而C被设计出来的时候并不是处理数据解析的。
因此诞生了VM这个新的类，也就出现MVVM。因此我们可以把MVVM也可以看作MVC的升级版
在这里插入图片描述
MVVM与MVC最大的区别就是：它通过Object.defineProperty实现了双向数据绑定，当Model的属性改变时，我们不用操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。有这么一句话就是说JS运算速度很快，DOM渲染很慢，因此这样能显著提升我们的性能，其中代表性的框架就是vue
例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p>
				<!-- 利用v-model实现双向数据绑定 -->
				<input type="text" v-model="name"><br />
				{{ name }}
			</p>
		</div>
		<script type="text/javascript" src="../node_modules/vue/dist/vue.min.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data:{
					name:'Vane'
				}
			})
		</script>
	</body>
</html>