mvc与mvvm的区别与联系

更新日期: 2019-08-13阅读: 1.9k标签: mvc

MVC

MVC的思想:一句话描述就是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 id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
var 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层显示会自动改变。


链接: https://www.fly63.com/article/detial/4723

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!