mvc与mvvm的区别与联系

Posted 2022-07-09 chengl062

 

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层显示会自动改变。