开发者学堂课程【Vue.js 入门与实战:MVC 和 MVVM 的关系图解】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/586/detail/8127
MVC 和 MVVM 的关系图解
一、MVC 和 MVVM 的区别
Node (后端)中的 MVC 与前端中的 MVVM 之间的区别
1.MVC是后端的分层开发概念;
M 是 MOD 层主要处理数据的 CRUD。V 是视图层,一般看作前端页面。C 是业务逻辑层,路由也相当于里面的一部分,大部分是 Comtroller。
2.MVVM 是前端视图层的概念;
主要关注于视图层分离,也就是说:MVVM 把前端的视图层,分为了三部分 Model, View , VM ViewModel
(1)app.js
(项目的入口模块,一切的请求都要先进入这里进行处理)
注意: app.js 并没有路由分发的功能,需要调用 router.js 模块进行路由器分发处理。
(2)Router.js
这是路由分发处理模块;
【为了保证路由模块的职能单一,router.js 只负责分发路由,不负责具体业务逻辑的处理】
如果涉及到了业务逻辑处理操作; router.js 就无能为力了,只能调用 controller 模块进行业务逻辑处理)。
(3)Comtroller
(业务逻辑处理层,在这个模块中,封装了一些具体业务逻辑处理的逻辑代码,但是,也是为了保证职能单一,此模块只负责处理业务,不负责处理数据的 CRUD, 如果涉及倒了数据的 CRUD,需要调用 Model 层)。
(4)Model
(职能单一,只负责操作数据库,执行对应的 Sql 语句,进行数据的 CRUD。
C:create(创建)R:Read(读取) U:update(更新) D:Delete(删除)
App.js 导向 router.js,路由调用 controller 业务逻辑模块,controller 里如果涉及到数据操作调用 Model 层。
(5)View 视图层
(每当用户操作了界面,如果需要进行业务的处理,都会通过网络请求,去请求后端的服务器,此时,这个请求就会被后端的 App.js 监听到。
Router.js 和 Controller 就是 Controller 层。
这是后端里的 MVC 项,综合考虑了后端和前端,把整个项目划分为了三层。
M:Model层
V:View 视图层
C:Controller 层(路由和页面)
MVVM 是前端视图层的分层开发思想,主要把每个页面分成了 M、V 和 VM,其中 VM 是 MVVM思想的核心:因为 VM 层是 M 和 V 之间的调度者。
M:保存的是每个页面中单独的数据。
VM:是一个调度者,分割了 M 和 V,每当 V 层想要获取后保存的数据。
V:就是每个页面中的 HTML 结构。
比如有一个首页,首页里可能会渲染一个 table 表格,这时需要运用 AJEX 从服务器里获取,拿到数据后返回一个数组,这个数组就是当前页面的 M。
拿到 M 需要渲染到具体页面的某个部分,页面里的 html 代码就是 V。
M 里的数据渲染到 V 里面,现在用到 MVVM,不能直接渲染到 V 里面,假如 V 里面修改了某个文本框需要把数据同步到 M 里,也是不能直接同步,因为中间有一个 VM。
M 和 V 不可相互调用,所以拿取数据或者保存数据都需要调用 VM。
前端页面中使用 MVVM 的思想,主要是为了让我们开发更加方便,因为 MVVM 提供了数据的双向绑定;
注意:数据的双向绑定是由 VM 提供的;
为什么有了MVC还要有MVVM:MVVM 是专属于前端的思想,MVC是后端的思想。