mvc与mvvm之间的区别

MVC与MVVM都是前端web开发的框架模式

MVC（Model View Controller 模型-视图-控制器）是一种Web架构的模式。

特点：把业务逻辑、模型数据、用户界面分离开来，让开发者将数据与表现解耦。

 

MVC三要素：

 

Model（数据模型）。是对客观事物的抽象。

比如知乎Live，Live就是一个模型，可以用Live类来表示。而一个模型通常还带有很多的和业务相关的逻辑，比如添加，更新，获取Live主讲人信息等等，这些组成了模型的方法。对于开发者模型的表示方法非常易懂和清晰，可以通过非常便捷的代码来做CURD操作而无需写一条又一条的SQL语句。

View（视图）。呈现给用户的效果，呈现的内容是基于Model，它也是收集用户输入的地方。

比如看到一篇Live，数据是一个Live.get(live_id).to_dict()的结果，效果是通过对应的模板和样式把这个数据展示出来。

Contorller（控制器）。是Model和View之间的沟通者。

因为View中不会对Model作任何操作，Model不会输出任何用于表现的东西，如HTML代码或者某种效果等，它就是点数据。而Contorller用于决定使用哪些Model，对Model执行什么操作，为视图准备哪些数据，是MVC中沟通的桥梁。

 

MVC的通信是单向的：

浏览器发送请求

Contorller和Model交互获取数据

Contorller调用View

View渲染数据返回

更简单的表达式：V -> C-> M -> C -> V

 

MVVM

定义：

MVVM（Model-View-ViewModel），是一种基于前端开发的架构模式。

核心是提供对View 和 ViewModel 的双向数据绑定，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，View的变动，自动反映在ViewModel上，反之亦然，这样就保证视图和数据的一致性。

来源：

现在前端，不仅仅是简单的数据展示了，它不仅要管理复杂的数据状态，还要处理移动设备上各种操作行为等等。因此，前端也需要工程化，也需要一个类似于MVC 的框架来管理这些复杂的逻辑，使开发更加高效：

View UI布局，展示数据

Model 管理数据

Controller 响应用户操作，并将 Model 更新到 View 上

前端应用的复杂程度已不同往日，今非昔比。这时前端开发就暴露出了三个痛点问题：

开发者在代码中大量调用相同的DOM API, 处理繁琐，操作冗余，使得代码难以维护。

大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。

当 Model 频繁发生变化，开发者需要主动更新到View ；当用户的操作导致Model发生变化，开发者同样需要将变化的数据同步到Model中， 这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

 

早期 jQuery 的出现就是为了前端能更简洁的操作DOM 而设计的，但它只解决了第一个问题，另外两个问题始终伴随着前端一直存在。

 

MVVM 的出现，完美解决了以上三个问题。

 

MVVM 的三部分：

Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；

View 代表UI 组件，它负责将数据模型转化成UI 展现出来，

ViewModel 是一个同步View 和 Model的对象。

View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。