mvc与mvvm的区别与联系

mvcMVCMVC的思想:一句话描述就是Controller负责将Model的数据用View显示出来,换句话说就是在Controller里面把Model的数据赋值给View,比如在controller中写document.getElementById("box").innerHTML

data[”title”],只是还没有刻意建一个Model类出来而已。M:Model(模型):是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。V:View(视图):是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。C:Controller(控制器):是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。Controller被设计出来:1、管理自己的生命周期;2、处理Controller之间的跳转;3、实现Controller容器。MVC标准如图:MVVM

开发者为数据解析创建出了一个新的类:ViewModel。利用MVVM可以使我们的代码更加专注于处理业务逻辑而不是去关心DOM操作。

它有两个方向:

一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。

这两个方向都实现的,我们称之为数据的双向绑定。总结:在MVVM的框架下视图和模型是不能直接通信的。

Vue就是基于MVVM模式实现的一套框架,在vue中:

Model:指的是js中的数据,如对象,数组等等。View:指的是页面视图viewModel:指的是vue实例化对象

例如:

div  p{{ message }}/p button v-on:click="reverseMessage"逆转消息/button/divvar app5 = new Vue({ el: ‘#app-5‘, data: { message: ‘Hello Vue.js!‘ }, methods: { reverseMessage: function () { this.message = this.message.split(‘‘).reverse().join(‘‘) } }})

这里的html部分相当于View层,可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM元素,当ViewModel对Model进行更新时,通过数据绑定更新到View。

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

整体看来,MVVM比MVC精简很多,不仅简化了业务与界面的依赖,还解决了数据频繁更新的问题,不用再用选择器操作DOM元素。因为在MVVM中,View不知道Model的存在,Model和ViewModel也观察不到View,这种低耦合模式提高代码的可重用性。

MVVM与MVC最大的区别就是:

它实现了View和Model的自动同步,也就是当Model的属性改变时,我们不用再自己手动操作Dom元素,来改变View的显示,而是改变属性后该属性对应View层显示会自动改变。

将Model转化成View,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。将View转化成Model,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。

控制器(Controller)- 起到不同层面间的组织作用,用于控制应用程序的流程。它处理事件并作出响应

时间: 2019-08-13阅读: 156标签:

当我们执行应用的时候,使用Controller做初始化:

.vue 即single-file components(单文件组件)就是vue中定义的组件,包含结构、样式以及javascript模块导出,能够完整的语法高亮,ComonJS/ES6模块,组件化的css

Vue采用数据劫持发布-订阅模式的方式,通过ES5提供的Object.defineProperty()方法来劫持(监控)各属性的getter、setter,并在数据(对象)发生变动时通知订阅者,触发相应的监听回调。并且,由于是在不同的数据上触发同步,可以精确的将变更发送给绑定的视图,而不是对所有的数据都执行一次检测。

3-7.v-model 定义数据,并实现数据双向绑定

Model

3-6.v-clock阻止页面闪烁,添加到有插值表达式元素上,或者直接添加到body

Controller(控制器)

(评分标准:MVC 5分,Model-View-Controller2分,每层功能1分;MVVM 5分,双向数据绑定2分,每层功能1分)

上面完成了对数据对象的监听,接下来还需要在监听到变化后去通知订阅者,这需要实现一个消息订阅器Dep,Watcher通过Dep添加订阅者,当数据改变便触发Dep.notify(),Watcher调用自己的update()方法完成视图更新。

(评分标准:每个1分)

View(视图)

vue-router vue中的路由插件,从而创建单页应用

MVVM

3-1.v-for遍历数组或者对象,添加到要重复的元素上

myapp.Controller = function() { var model = null, view = null; this.init = function() { /* 初始化Model和View */ model = new myapp.Model(); view = new myapp.View(this); /* View向Model注册,当Model更新就会去通知View啦 */ model.register(view); model.notify(); }; /* 让Model更新数值并通知View更新视图 */ this.increase = function() { model.add(1); model.notify(); }; this.decrease = function() { model.sub(1); model.notify(); };};

视图(View) - 数据展示。

view和controller之间使用了策略模式,这里View引入了Controller的实例来实现特定的响应策略,比如这个栗子中按钮的 click 事件:

在MVVM架构下,View 和 Model 之间并没有直接的联系,而是通过ViewModel进行交互,Model 和 ViewModel 之间的交互是双向的, 因此View 数据的变化会同步到Model中,而Model 数据的变化也会立即反应到View 上。

div  div span{{ val }}rmb/span /div div button v-on:click="sub(1)"-/button button v-on:click="add(1)"+/button /div/div

Vue是一款轻量级的构建用户界面的MVVM渐进式框架,特点双向数据绑定、声明式指令、组件化。

var myapp = {}; // 创建这个应用对象myapp.Model = function() { var val = 0; this.add = function(v) { if (val  100) val += v; }; this.sub = function(v) { if (val  0) val -= v; }; this.getVal = function() { return val; }; /* 观察者模式 */ var self = this, views = []; this.register = function(view) { views.push(view); }; this.notify = function() { for(var i = 0; i  views.length; i++) { views[i].render(self); } };};

3-5.v-show通过元素的display:block/none进行显示隐藏

整体来看,比MVC/MVP精简了很多,不仅仅简化了业务与界面的依赖,还解决了数据频繁更新(以前用jQuery操作DOM很繁琐)的问题。因为在MVVM中,View不知道Model的存在,ViewModel和Model也察觉不到View,这种低耦合模式可以使开发过程更加容易,提高应用的可重用性。

3-8.v-text更新元素的文本内容,相当于{{}}插值表达式

各部分之间的通信方式如下,所有通讯都是单向的 。

vue-resource vue中的Ajax插件,跟后端进行数据交互,以及设置ajax前后的加载动画

Controller是MVC中的数据和视图的协调者,也就是在Controller里面把Model的数据赋值给View来显示(或者是View接收用户输入的数据然后由Controller把这些数据传给Model来保存到本地或者上传到服务器)。

另外,通过定义和隔离状态管理中的各种概念并强制遵守一定的规则,我们的代码将会变得更结构化且易维护。

接受用户指令时,MVC 可以分成两种方式:一种是通过 View 接受指令,传递给 Controller。

2、谈谈你对Vue、Vuex、vue-router、vue-resource以及单文件vue的认识

Model定义了这个模块的数据模型。在代码中体现为数据管理者,Model负责对数据进行获取及存放。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来,而View 和 Model 之间的同步工作完全是自动的,无需人为干涉,因此开发者只需关注业务逻辑,不需要手动操作DOM, 不需要关注数据状态的同步问题,复杂的数据状态维护完全由 MVVM 来统一管理

Model(模型)

MVC的目的是实现一种动态的程序设计,使后续对程序的修改和扩展简化,并且使程序某一部分的重复利用成为可能。除此之外,此模式通过对复杂度的简化,使程序结构更加直观。软件系统通过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。

另一种是直接通过controller接受指令。

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。在这种模式下,我们的组件树构成了一个巨大的“视图”,不管在树的哪个位置,任何组件都能获取状态或者触发行为!

View(视图)是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。

3-3.v-on:click 绑定事件

一般对数据的劫持都是通过Object.defineProperty方法进行的,Vue中对应的函数为defineReactive,其普通对象的劫持的精简版代码如下:

模型(Model)- 用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法

Controller(控制器)是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。

MVVM 由 Model,View,ViewModel 三部分构成,Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑;View 代表UI 组件,它负责将数据模型转化成UI 展现出来,ViewModel 是一个同步View 和 Model的对象。

Model和View之间使用了观察者模式,View事先在此Model上注册,进而观察Model,以便更新在Model上发生改变的数据。

3-9.v-pre 跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

Observer 数据监听器负责对数据对象的所有属性进行监听(数据劫持),监听到数据发生变化后通知订阅者。Compiler 指令解析器扫描模板,并对指令进行解析,然后绑定指定事件。Watcher 订阅者关联Observer和Compile,能够订阅并收到属性变动的通知,执行指令绑定的相应操作,更新视图。Update()是它自身的一个方法,用于执行Compile中绑定的回调,更新视图。数据劫持

3-10 .v-once 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

我们可以把Model称为数据层,因为它仅仅关注数据本身,不关心任何行为(格式化数据由View的负责),这里可以把它理解为一个类似json的数据对象。

(评分标准:每个2分)

MVVM流程图如下:

3-4.v-if 通过元素的插入删除进行显示隐藏

通讯

MVC模式(Model-View-Controller) 是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model)、视图(View)和控制器(Controller)。

myapp.View = function(controller) { var $num = $('#num'), $incBtn = $('#increase'), $decBtn = $('#decrease'); this.render = function(model) { $num.text(model.getVal() + 'rmb'); }; /* 绑定事件 */ $incBtn.click(controller.increase); $decBtn.click(controller.decrease);};

3、列举Vue中的指令,并说明作用,不少于10个

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事ViewModel已经帮我们做了,它可以取出Model的数据同时帮忙处理View中由于需要展示内容而涉及的业务逻辑。

1、MVC是什么?MVVM又是什么?有何特点?

MVC 模式代表 Model-View-Controller(模型-视图-控制器) 模式。这种模式用于应用程序的分层开发。

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定。

var foo = { name: 'vue', version: '2.0'}function observe(data) { if (!data || typeof data !== 'object') { return } // 使用递归劫持对象属性 Object.keys(data).forEach(function(key) { defineReactive(data, key, data[key]); })}function defineReactive(obj, key, value) { // 监听子属性 比如这里data对象里的 'name' 或者 'version' observe(value) Object.defineProperty(obj, key, { get: function reactiveGetter() { return value }, set: function reactiveSetter(newVal) { if (value === newVal) { return } else { value = newVal console.log(`监听成功:${value} -- ${newVal}`) } } })}observe(foo)foo.name = 'angular' // “监听成功:vue -- angular”复制代码

3-2.v-bind:prop 绑定属性

ViewModel

View,视图,简单来说,就是我们在界面上看见的一切。

这里我们把需要用到的数值变量封装在Model中,并定义了add、sub、getVal三种操作数值方法。

(function() { var controller = new myapp.Controller(); controller.init();})();

View

new Vue({ el: '#myapp', data: data, methods: { add(v) { if(this.val  100) { this.val += v; } }, sub(v) { if(this.val  0) { this.val -= v; } } }});

Vue数据双向绑定原理数据绑定

时间: 2019-10-11阅读: 88标签: 模型MVC那时计算机世界天地混沌,浑然一体,然后出现了一个创世者,将现实世界抽象出模型形成model,将人机交互从应用逻辑中分离形成view,然后就有了空气、水、鸡啊、蛋什么的。——《前端MVC变形记》

总结:在MVVM的框架下视图View和模型Model是不能直接通信的。它们通过ViewModel来通信,ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新,而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View和ViewModel可以互相通信。

MVC模式的业务逻辑主要集中在Controller,而前端的View其实已经具备了独立处理用户事件的能力,当每个事件都流经Controller时,这层会变得十分臃肿。而且MVC中View和Controller一般是一一对应的,捆绑起来表示一个组件,视图与控制器间的过于紧密的连接让Controller的复用性成了问题。

双向数据绑定,可以简单而不恰当地理解为一个模版引擎,但是会根据数据变更实时渲染。不同的MVVM框架中,实现双向数据绑定的技术有所不同。目前一些主流的前端框架实现数据绑定的方式大致有以下几种:

mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:

MVC允许在不改变视图的情况下改变视图对用户输入的响应方式,用户对View的操作交给了Controller处理,在Controller中响应View的事件调用Model的接口对数据进行操作,一旦Model发生变化便通知相关视图进行更新。

var data = { val: 0};

数据劫持 (Vue)发布-订阅模式 (Knockout、Backbone)脏值检查 (Angular)

要实现Vue中的双向数据绑定,大致可以划分三个模块:Observer、Compile、Watcher,如图:

数据不可能凭空生成的,要么是从服务器上面获取到的数据,要么是本地数据库中的数据,也有可能是用户在UI上填写的表单即将上传到服务器上面存放,所以需要有数据来源。既然Model是数据管理者,则自然由它来负责获取数据。

这里我们实例化View并向对应的Model实例注册,当Model发生变化时就去通知View做更新,这里用到了观察者模式。

View 传送指令到 ControllerController 完成业务逻辑后,要求 Model 改变状态Model 将新的数据发送到 View,用户得到反馈

指的是所看到的页面,和MVC/MVP不同的是,MVVM中的View通过使用模板语法来声明式的将数据渲染进DOM,当ViewModel对Model进行更新的时候,会通过数据绑定更新到View。

如果要实现不同的响应的策略只要用不同的Controller实例替换即可。

Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。

原文:

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:mvc与mvvm的区别与联系

相关阅读