Vue学习日记之MVC与MVVM
1、为何要了解MVC与MVVM模式
首先,MVC是后端的分层处理概念,M指的是Model数据处理层,V指的是view视图层,C置得是controll业务逻辑处理层,MVC的出现使得一个项目的开发变得更加简便和清晰,降低了代码之间的耦合程度,项目之间的分功也更加的明确,这时你可能要问了,我们是在学习vue,而且我们是前端工程师,为什么还要了解MVC呢?
其实,了解MVC有助于我们学习MVVM,而Vue更是MVVM中的集大成者,更加贯彻了MVVM的双向绑定精髓
MVVM是前端的概念,最主要思想是同MVC一样,将数据,业务逻辑,视图分隔开,使得编写代码更加得容易!!!关键是,我们再也不用DOM操作了!彻底解放你的双手!!!
2、MVC模式
2.1 基本思想
前面提到过MVC是后端处理的概念,主要得思想是,将数据,业务逻辑,视图隔离开,降低代码耦合度,实现职能单一原则
2.2 MVC代表的含义
2.2.1 M---model
M代表的是model,作用是,数据的CRUD操作,CRUD操作是什么呢?C---create,创建数据。R---read,读取数据。U---update,更新数据。D---delete,删除数据。简而言之就是数据的处理操作,这一层是跟数据库打交道。
2.2.2 V---view
V代表的是view,作用是,呈现从M取出的数据(这里不太准确),与用户直接关联的页面,如果更通俗点来讲就是,用户界面也就是前端页面
2.2.3 C---controll
C代表的是controll,作用是,项目的业务的逻辑处理。它本身不做任何事情,只是将view请求,传给对应的model去处理请求,再决定用哪个view来显示返回的数据
2.3 举个例子
我们将MVC可以看成是一一种餐馆模式,M---是厨师,对菜品(数据)的加工(CRUD)。V---是菜单和店面,呈现给顾客(用户)的。C---是服务员,负责处理顾客的点菜需求。
当一名顾客来到餐馆,第一眼看到的是店面和菜单,此时顾客选择了喜欢的菜品,便告诉服务员(controll),服务员拿着菜单,进入后厨(服务器),看着菜单,选择性的告诉某个厨师,顾客的要求,厨师(model)根据服务员的指示,对菜品进行加工,加工完毕后,服务员拿走菜品,送到餐桌上(view)。这就是一个简单的MVC模式。
3、MVVM模式
3.1 基本思想
跟MVC一样,在前端页面充满了大量的html,css以及js文件中时,我们需要很好的对前端页面进行解耦,于是我们迫切的需要一个类似MVC的模式,来对前端页面进行解耦处理,MVVM应势而生
(此图来自https://www.cnblogs.com/iovec/p/7840228.html,侵删)
3.2 MVVM代表的含义
3.2.1 M
这里的M与MVC里的M一样也是Model,代表的是数据模型,涉及的东西非常多。
3.2.2 V
这里的V与MVC里的一样,同样是View,代表的是用户界面,展示来自ViewModel或者Model的数据
3.2.3 VM
VM是MVVM中的重点,指的是:ViewModel,它位于Model与View层之间,是一个数据的中转站,类似MVC中的C,但又不仅仅是那么简单,它能将Model中的数据转换,做二次封装,生成符合View层适合的数据模型,最重要的是,它与View层实现了双向绑定,View层显示的数据是ViewModel中的数据,这个数据是实时的,当我们修改ViewModel中的数据,不用我们进行另外的操作,View层的数据已经更新了!!!也就是说,我们不需要自己去修改DOM了,ViewModel已经帮我们做好了,我们只需要关注ViewModel就行了!!
3.3 举个例子
首先让我们来看看MVVM整体在前端页面的示意图
(此图来自https://www.cnblogs.com/iovec/p/7840228.html,侵删)
View层实例:
<div id="app" >
<p>{{message}}</p>
</div>
ViewModel层实例
var vm=new Vue({
el:"#app",
data:{
message:"实现了双向绑定!!"
}
})
结果页面:
打开控制台
此时,不需要刷新页面,我们可以发现
这里我们没有涉及到Model,但是原理也是跟上面讲的一致。
4、总结
我们简单的了解了MVC与MVVM模式,重要的不是哪个模式更好,而是,哪个模式更适合我们现在的项目,像Vue就实现了MVVM,让我们感觉到编写代码的方便,也解耦了Model和View。