MVVM vs MVC

总体介绍

首先，两者都是一种架构思想。都是从后端演变而来。

具体的演变流程：传统MVC ——> MVP ——> MVVM

MVC

- M - Model 数据：数据实体,用来保存页面要展示的数据。比如ajax获取的数据。

- V - View 视图，显示数据的页面，一般为html。

- C - Controller 控制器：控制整个业务逻辑,负责处理数据,比如数据的获取,以及数据的过滤，进而影响数据在视图上的展示。

MVVM

M - Model 数据：它是与应用程序的业务逻辑相关的数据的封装载体

V - View 视图：它专注于界面的显示和渲染

VM - ViewModel 视图-数据：它是View和Model的粘合体，负责View和Model的交互和协作

Angular是MVC还是MVVM

先下定论，准确的说可以理解为MVC形式的前端框架，但是也可以说是MVVM形式的框架。缘由慢慢道来。

一、MVC

首先：

V即视图层是没有任何争议的，即代表的就是页面展示层，即视图层。用来显示渲染数据，展示用户所看到的内容。在angular中视图就是在@componet装饰器中组装的html模板。

M：即数据模型，在angular中可以认为是从服务端获取的数据，因为angular提倡的是组件化、模块化开发。所以不建议将与后台交互的业务逻辑、数据请求与组件混合，而是专门放在服务即service中单独处理，通过依赖注入（DI）的形式将获取到的数据注入到所应用的组件。所以可以将service服务层认为就是MVC中的M层。

C: 即控制器，控制器的作用就是提供页面显示的属性、跟页面相关的业务逻辑。那么在angular中可以理解为组件。因为在angular中组件通过装饰器@component修饰，并组装所需要的元数据，而模板所需要的属性、数据都是在组件即@component所修饰的类中定义的。而组件只是负责为视图提供属性值数据和跟页面相关的业务逻辑处理后的数据，不直接参与数据与后端的交互。所有，C就是angular中的组件。

综上所述，angular完全可以认为是MVC形式的前端框架。

二、MVVM

那么angular为什么又可以理解为是MVVM形式的框架呢？

个人觉得，MVVM的划分相对MVC来说更细一点，或者说MVVM可以认为是从VMC中抽离出来的一部分。那如何得以体现呢，下面阐述完MVVM之后，和上面一对比，则一目了然。

V：即视图层，这个还是不变的，都是代表了用户能看到的内容。在angular中它就是html模板。通过html模板来达到与用户之间的交互。

M: 即模型，模型对应的就是模型数据。如果要把angular理解为MVVM形式的话，那这块就要理解为是MVC形式中M和C的结合体。为什么呢？下面从MVVM形式的角度来理解。在MVVM中M既担任了视图层V所需要的基本数据，也担任了从后台获取的数据，即通过ajax请求后台获取数据的工作。只不过在angular中，建议是控制器负责与页面交互的基本数据和业务逻辑处理，而与后台交互的例如ajax处理放到了服务service中。我们也完全可以直接在组件控制器中执行完所有操作，不必分层处理，所以可以认为M（MVC）+ C（MVC）= M（MVVM）。在angular中可以理解为M就是组件控制器和服务service两者的结合。

VM: 即视图模型，视图模型的作用是用来连接V视图层和M数据模型层的桥梁。所以为什么上面说可以认为MVVM是MVC的演变或者细化，其实两者的角度不同而已。MVVM中的VM是将M中的数据提供给V用于展示，同时将V中用户改变的数据同步到M中。同样在angular中也是这样实现的，在angular中当改变了数据之后页面就会变化，而页面用户操作之后，M中的数据就会自动更新。

综上所述，angular也可以认为是MVVM的前端框架。

作者：天使凤凰_
链接：https://www.jianshu.com/p/11c89d58d5d5
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

angular是MVC模式还是MVVM架构模式相关推荐

浅谈 MVC、MVP 和 MVVM 架构模式
2019独角兽企业重金招聘Python工程师标准>>> 谈谈 MVX 中的 Model 谈谈 MVX 中的 View 谈谈 MVX 中的 Controller 浅谈 MVC.MVP ...
10个常见软件架构模式和三层架构模式
10个常见软件架构模式: 1. 分层模式: 信息系统常见的4层划分:Presentation layer表示层(也就是UI层).Application layer应用层(也就是服务层).Busines ...
浅谈MVC、MVP、MVVM架构模式的区别和联系
MVC.MVP.MVVM这些模式是为了解决开发过程中的实际问题而提出来的,目前作为主流的几种架构模式而被广泛使用. 一.MVC(Model-View-Controller) MVC是比较直观的架构模式 ...
android新架构模式_Android MVIReact架构模式
android新架构模式 If you are already aware of basic principles of architecture patterns and MVVM and MVI ...
MVC+MVVM架构模式
一.MVC设计/架构/编程模式 1.MVC设计/架构/编程模式是什么 MVC是一种使用MVC设计创建WEB应用程序的模式,把WEB应用分为三个基本部分: 模型(Model) - 表示应用程序核心(数据 ...
mvvm模式和mvc的区别_Android 开发中的架构模式 -- MVC / MVP / MVVM
预备知识了解 Android 基本开发看完本文可以达到什么程度了解如何分析一个架构模式掌握 MVC,MVP,MVVM 架构定义和实现更多面试内容,面试专题,flutter视频全套,音视频从 ...
MVC模式与三层架构的区别
MVC模式与三层架构的区别原文地址:http://www.cnblogs.com/yourshj/p/5197310.html 之前总是混淆MVC表现模式和三层架构模式,为此记录下. 三层架构和MV ...
软件开发架构模式浅谈：一些思考和实践记录
一背景和问题我个人平时会比较慎用"架构"这个词一方面是觉得业界有很多架构大师和架构模式,而我的认知和实践有限: 另一方面是因为这个词看着挺高大上.有点务虚,如果不结合实际场景 ...
浅谈软件开发架构模式
本文作者将介绍他对于软件开发架构模式的一些思考和实践. 背景和问题我个人平时会比较慎用"架构"这个词一方面是觉得业界有很多架构大师和架构模式,而我的认知和实践有限: 另一方面是 ...

angular是MVC模式还是MVVM架构模式