后端中的 MVC 与 前端中的 MVVM 之间的区别
-
MVC 是后端的分层开发概念,主要分为 Model, View , Controller
-
MVVM是前端视图层的概念,主要关注于 视图层分离,MVVM把前端的视图层分为了 三部分 Model, View , VM ViewModel
MVVM 简单来说解决了使用MVC中 “控制器依赖视图的结构,导致视图不可以随便修改” 的问题。
MVVM 的核心是 ViewModel 层,负责转换 Model 中的数据对象让数据变得更容易管理和使用,其作用如下:
- 该层向上与视图层进行双向数据绑定
-
向下与 Model 层通过接口请求进行数据交互
结合 下图了解MVC 和 MVVM数据的处理过程:
从上图可以看到MVC和MVVM之间的区别:
扫描二维码关注公众号,回复:
9331608 查看本文章
- 绿色边框中的 Model , View , Controller 层,是后端的 MVC,它是站在整个项目的角度,充分考虑了前端和后端,把项目划分为了三层
- 红色边框的就是我们的MVVM,这个概念只针对于我们的前端视图层,它的位置就在 View 视图层中,它是把前端的每个页面划分为了三层(M、V、VM)
-
MVVM是前端视图层的分层开发思想,主要把每个页面分成了M、V 和 VM,其中, VM 是 MVVM 思想的核心,因为VM 是M 和 V 之间的调度者
-
前端页面中使用MVVM 的思想,主要是为了让我们开发更加方便,因为 MVVM 提供了数据的双向绑定(是由VM提供的双向绑定)
怎么理解MVVM中的M、V 和 VM?
导入vue:(这里我的包是在lib目录下的)
<!-- 1. 导入Vue的包 -->
<script src="./lib/vue-2.4.0.js"></script>
代码:
(无注解版):
<body>
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: '欢迎学习Vue'
}
})
</script>
</body>
(结合注解):
<body>
<!-- 将来 new 的Vue实例,会控制这个 元素中的所有内容 -->
<!-- Vue 实例所控制的这个元素区域,就是我们的 V -->
<div id="app">
<p>{{ msg }}</p>
</div>
<script>
// 2.创建一个Vue的实例
// 当我们导入包之后,在浏览器的内存中,就多了一个 Vue 构造函数
// 注意:我们 new 出来的这个 vm 对象,就是我们 MVVM中的 VM调度者
var vm = new Vue({
el: '#app', // 表示,当前我们 new 的这个 Vue 实例,要控制页面上的哪个区域
// 这里的 data 就是 MVVM中的 M,专门用来保存 每个页面的数据的
data: { // data 属性中,存放的是 el 中要用到的数据
msg: '欢迎学习Vue' // 通过 Vue 提供的指令,很方便的就能把数据渲染到页面上,程序员不再手动操作DOM元素了【前端的Vue之类的框架,不提倡我们去手动操作DOM元素了】
}
})
</script>
</body>
可以发现,
- MVVM 中的 M 层指的是 data :专门用来保存每个页面的数据
- V 层指的是视图层,也就是用户看到的,就是我们Vue实例所控制的元素区域
- VM 调度者指的是我们 new 出来的这个 Vue 的实例对象
其中页面中显示数据用的是 插值表达式( {{ }} )
所谓双向绑定就是当页面中数据发生变化时,data中保存的数据也会随之改变,反之,当data中的数据改变时,页面上相互绑定的那个值也会发生变化,双向绑定就很方便监听数据的变化和更新数据
如果不使用双向绑定,像上面的代码,我们就要给 p 标签设置一个 “content” 的类名,然后使用下面方式去获取或者渲染数据,所以MVVM双向绑定的优势就体现出来了
$('$content').text(data.msg)
(自己浅薄理解,如有错误忘指出)