>本节讲解的内容对前面的章节具有依赖性,如果看起来有困难,请先看本系列前面的章节 ## 一、MVVM模型 ![](https://img.kancloud.cn/7c/c8/7cc82a6a40244d5e6ff87a3db9653586_578x300.png) 在第一节:前端响应式框架VUE简介中我们曾简单的介绍过MVVM模型。 + MVVM:页面输入改变数据,数据改变影响页面数据展示与渲染 - M(model):普通的javascript数据对象 - V(view):前端展示页面或前端组件 - VM(ViewModel):用于双向绑定数据与页面,对于我们的课程来说,就是vue的实例 具体到编码层面,**注意我们提到的MVVM都是前端的概念**,体现如下: ![](https://img.kancloud.cn/58/06/5806ff2cfa1cd15373bb1626712d72b3_1162x510.png) * VIewModel(VUE的实例)作为MVVM模型的核心,负责监听DOM的变化去修改Model(data)数据;负责将数据绑定到页面上进行数据展示及页面渲染。是View与Model沟通的桥梁。 * ViewModel帮我们实现了双向数据绑定的底层支撑,即VUE帮我们实现。 * ViewModel是对视图及模型的抽象,即可以操作视图,也可以操作数据模型,并实现二者的自动响应式的彼此影响。 ## 二、MVVM模型与直接操作DOM的区别 如果,我们使用js操作DOM的方式完成上面的代码完成的工作。首先,我们需要先选取需要进行操作的DOM节点,为此我们需要为h2标签加上一个id,如h2id。然后通过ajax向服务器发送请求,接收服务端的数据。通过dom节点,操作节点的数据和显示样式。 ``` var dom = document.getElementById('h2id'); //向服务器发送ajax请求,获取数据,如 '你好,Vue'; dom.innerText = '你好,Vue'; ``` 然而MVVM编程模型**不需要关心DOM的结构**。同样的操作只需要下面这一行代码: ``` app.message = 'zimug'; ``` * MVVM模型不关心DOM的结构,不需要寻找DOM节点 * MVVM模型通过修改模型数据改变视图显示,不使用DOM的innerText、innerHtml等 * MVVM模型要求我们在前端考虑数据模型,这样有更利于前后端解耦,实现前后端分离应用的开发。(也就是说,开发阶段可以先在前端模型里面写假数据,前后端并行开发) ## 三、MVVM和MVC模式区别与联系 * MVVM是MVC模式的一个演变,是John Gossman在《Model/View/ViewModel pattern for building WPF apps》中提出的。 * 但在实际的开发应用中,MVC是后端开发广泛应用的模式,而MVVM模式是前端广泛应用的模式,从使用的角度二者并无交集。所以**笔者建议:不要将二者强行的关联比较,学MVC的时候学MVC(后端),学MVVM的时候就学MVVM(前端),这样就足够了,否则容易晕掉**。 * MVC的Model指的是服务端的Model,而MVVM的Model指的是javascript端的Model。这个变化非常有意义,真正的实现了前后端的分离。前端开发可以先在model里面写假数据,然后再与后端进行数据接口对接。 * 二者的核心思想都是将视图(View)与模型(Model)解耦,即视图与数据的解耦。 在后面的章节中,我们通过实际的应用,相信大家会对MVVM模式有更加深入的理解!