想要真正搞清楚他们的区别只要清楚认识最基础的mvc模式就好理解了，我们在搜索mvc和mvvm的时候通常都是文字叙述或者附加上模型图片，但是当你读完以后发现和其他搜素的叙述大差不差。
大多数文章的解释都是m是Model模型用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据，v是View处理数据显示的部分，通常视图是依据模型数据创建，c是Controller控制器处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。但是读完以后，view好理解但是又想问model模型、controlle到底是是什么，然后我们就开始搜索看的也是似懂非懂。
今天小颜就以我们最熟悉的方式告诉你们到底什么是mvc，一般想要搞清楚mvc的前端大佬都已经有好几年的工作经验了，所以这篇文章就以平时我们写的最简单的代码里总结一下哪块是model部分哪块是control部分或者view。
假设领导让我们写一个简单的计数器应用，用户可以通过点击按钮来增加或减少数字。
1.1 Model（模型）
模型负责存储和管理数据。在我们的计数器应用程序中，模型将存储当前计数器的值。
// 模型
var model = {
count: 0 // 计数器初始值
};
// 提供方法来增加和减少计数器的值
model.increment = function() {
this.count++;
};
model.decrement = function() {
if (this.count > 0) {
this.count--;
}
};
1.2 View（视图）
视图负责展示数据给用户。在我们的计数器应用程序中，视图将显示当前计数器的值。
<!-- 视图 -->
<div id="counter-view">
<p>当前计数：<span id="counter-value">0</span></p >
<button id="increment-button">增加</button>
<button id="decrement-button">减少</button>
</div>
<script>
// 初始时设置视图的值
document.getElementById('counter-value').textContent = model.count;
</script>
1.3 Controller（控制器）
控制器负责接收用户的输入，并调用模型和视图来更新数据和界面。
// 控制器
document.getElementById('increment-button').addEventListener('click', function() {
model.increment(); // 更新模型
document.getElementById('counter-value').textContent = model.count; // 更新视图
});
document.getElementById('decrement-button').addEventListener('click', function() {
model.decrement(); // 更新模型
document.getElementById('counter-value').textContent = model.count; // 更新视图
});
当用户点击“增加”按钮时，控制器捕获到该事件并调用模型中的increment方法。模型中的count值增加后，控制器更新视图中的计数器显示。同理，当用户点击“减少”按钮时，控制器调用模型中的decrement方法，并更新视图的显示。
所以当我们看完这个最简单的实例以后，就知道搜索的文章里所讲的模型提供的方法是什么意思了。实例中模型提供方法来增加和减少计数器的值。视图层不仅仅有包含标签部分，还有初始化设置实图的值。控制器层处理用户交互的部分，控制器负责从视图读取数据，控制用户输入，并向模型发送数据就很好理解了，到这，想必你对mvc的理解更清晰了。
好了我们弄清楚了mvc其实就在我们每天写的代码里面，只不过我们没有去区分model、view、control层而已，是不是很简单！接下来我们就要搞清楚mvvm模式了，我们搞懂了mvc就等于搞清楚一大半的mvvm了，因为mvvm里面的mv和mvc里面的mv是一样的。
MVVM 与 MVC 最大的区别就是：它实现了 View 和 Model 的自动同步，也就是当 Model 的属性改变时，我们不用再自己手动操作 Dom 元素，来改变 View 的显示，而是改变属性后该属性对应 View 层显示会自动改变。这就是mv做的工作，相当于mvc里面的控制器操作的部分全由vm层处理了，vm层当然做的工作更多。
到这想必大家很清楚mvc和mvvm了，当然这里面有个知识点vm到底怎么工作的，这个留着大家思考，后面小颜会给大家解释的。但是到这为止已经对两种前段框架设计模式原理已经很清楚了，不管对平时开发时候的理解还是换工作面试时面试官问你此类问题都可以轻松应对了。
