MVC和MVVM的区别

一、概念

MVC,MVP,MVVM是三种常见的前端架构模式(Architectural Pattern),它通过分离关注点来改进代码组织方式。不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法,一种架构模式往往能使用多种设计模式。

MVC模式是MVP,MVVM模式的基础,这两种模式更像是MVC模式的优化改良版,他们三个的MV即Model,view相同,不同的是MV之间的纽带部分。本文主要介绍MVC与MVVM的应用与区别,因为MVP好像不是很常用。

二、MVC

这个MVC是站在整个项目角度来看的,涵盖了前端和后端,前端是V(view层),后端是VC(controller+model)

MVC和MVVM的区别_第1张图片

三、MVVM

mvvm是前端视图层的分层开发思想,主要把每个页面分成了M、V、VM,其中VM是MVVM思想的核心,因为它是M和V之间的调度者
MVC和MVVM的区别_第2张图片

重点:前端页面中使用MVVM,主要是为了让开发更加方便,因为MVVM提供了数据的双向绑定,这个双向绑定是由VM来提供的

这里可以举个vue的例子

{{ message }}

var app5 = new Vue({ el: '#app-5', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } })

代码解析:这里的html部分相当于View层,data相当于Model层,可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM元素,通过对view层元素的事件监听,一view有需要改变model(如点击后改变数据内容),ViewModel就会通过对应事件对Model进行更新,更新完后,数据会自动更新到View,这就是view->vm->model->view的过程。另一条路就是model数据改变(如:接口请求返回数据变化)会自动更新至View层

ViewModel层的核心是Vue中的双向数据绑定,即Model变化时View可以实时更新,View变化也能让Model发生变化。

你可能感兴趣的:(设计模式,mvc,前端,vue.js)