>本节讲解的内容对前面的章节具有依赖性，如果看起来有困难，请先看本系列前面的章节 ## 一、MVVM模型  在第一节：前端响应式框架VUE简介中我们曾简单的介绍过MVVM模型。 + MVVM：页面输入改变数据，数据改变影响页面数据展示与渲染 - M（model）：普通的javascript数据对象 - V（view）：前端展示页面或前端组件 - VM（ViewModel）：用于双向绑定数据与页面，对于我们的课程来说，就是vue的实例 具体到编码层面，**注意我们提到的MVVM都是前端的概念**，体现如下：  * 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模式有更加深入的理解！