百度一面好简单:MVC与MVVM的区别!

刚刚经历了大厂百度的一面，居然问到了MVC与MVVM的区别，这能难道我?要说出区别当然要先知道两者分别是什么。下面我们就来看看对MVC和MVVM的讲解。

01 MVC是啥？

MVC是一种架构思想，全称Model-View-Controller，即模型-视图-控制器，MVC是后端的开发思想，将数据从后端经过控制器层转向前端视图展示。

• View：视图层 ui界面
• Model：模型 数据
• Controller：控制器 接受并处理用户请求通知Model改变，并将Model返回给 View

优点：

（1）耦合性低：视图层和业务层分离，这样允许更改视图层代码而不用重新编译模型和控制器代码，改变其中一个不会影响到其他两个，所以这种设计思想有良好的松耦合的构件

（2）重用性高：MVC模式允许各种不同样式的视图来访问同一个服务的代码，因为多个视图能共享要给模型数据。

（3）生命周期成本低：MVC使开发和维护用户接口的技术含量降低。

（4）部署快：使用MVC模式开发时间相当大的缩减，它使程序员集中精力在业务逻辑上，视图与业务逻辑分开。

（5）可维护性高:分离视图层和业务层逻辑也是WEB应用更易于维护和修改.

（6）有利于软件工程化管理:由于不同的层各司其职，每一层不同的应用具有某些特性，有利于通过工程化、工程化管理程序代码，可以使用控制器来连接不同的模型和视图去完成客户的需求.控制器可以根据用户需求选择模型进行处理，然后选择视图处理结果显示给用户

02 MVVM是啥？

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。

Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

• Model：数据模型，存放用于展示的数据，有的数据是写死的，大多数是从后端返回的数据
• View：视图，用于界面，在前端我们可以理解为Dom操作
• ViewModel：视图模型，可实现数据的双向绑定，连接View和Model的桥梁，当数据变化时，ViewModel够监听到数据的变化（通过Data Bindings），自动更新视图，而当用户操作视图，ViewModel也能监听到视图的变化（通过DOM Listeners），然后通知数据做改动，这就实现了数据的双向绑定

优点：

（1）低耦合：视图View可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

（2）可重用性：可以把一些视图逻辑放在ViewModel里面，让很多view重用这段视图逻辑。

（3）独立开发：开发人员可以专注业务逻辑和数据的开发，设计人员可以专注页面设计。

（4）可测试：界面向来比较难预测时，测试可针对ViewModel来写。

扩展小知识，为什么会有MVVM框架：

在过去的10年中，我们已经把很多传统的服务端代码放到了浏览器中，这样就产生了成千上万行的javascript代码，它们连接了各式各样的HTML 和CSS文件，但缺乏正规的组织形式，这就是为什么越来越多的开发者使用javascript框架，比如：angular、react、vue。浏览器的兼容性问题已经不再是前端的阻碍，前端的项目越来越大，项目的可维护性和扩展性、安全性等成了主要问题，当年为了解决浏览器兼容性问题，出现了很多类库，其中最典型的就是jquery，但是这类库没有实现对业务逻辑的分成，所以维护性和扩展性极差。

综上两方面原因，才有了MVVM模式一类框架的出现。比如vue，通过数据的双向绑定，极大了提高了开发效率。

03 MVC与MVVM的区别

（1）都是一种设计思想；

（2）MVC后端用的多，而MVVM是前端设计思想；

（3）MVC是单向通信，数据模型必须通过Controller层进行承上启下。MVVM是将View和Model实现自动同步，当Model属性改变时，不用再自己手动操作Dom元素，提高页面渲染性能。