1.2 使用Vue.js理解MVVM模式

Vue.js是一个提供了MVVM模型的双向数据绑定的JavaScript框架，专注于View层。它的核心是MVVM中的VM，即ViewModel。ViewModel负责连接View和Model，保证视图和数据的一致性，这种轻量级的框架使前端开发更加高效和便捷。

在Vue.js中，呈现页面的HTML标签是View，Model是用于渲染的数据，ViewModel是创建的Vue实例。数据可以在Vue实例中写，也可以重新创建一个装载数据的对象。Vue.js的最大特点是实现了数据的双向绑定。在一般情况下，需要通过编写代码，对从服务器获取的数据进行渲染，并展现到视图中。每当数据有变更时，会再次进行渲染，从而更新视图，使得视图与数据保持一致。Vue不会反复渲染页面更新视图，而是会通过用户的交互，产生状态、数据的变化，将视图对数据的更新同步到ViewModel中，进而提交到后台服务器。

图1-2 Vue.js的MVVM模式

图1-2中的DOM Listeners和DataBindings可以看作两个工具，它们是实现双向绑定的关键。当View发生变化时，ViewModel中的DOM Listeners工具会监测页面中DOM元素的变化，如果有变化，则更改Model中的数据；当Model中的数据更新时，Data Bindings工具会更新页面中的DOM元素。

下面通过一个实例帮助读者进一步了解数据的双向绑定。在Vue.js中，可以使用v-model指令在表单上创建双向数据绑定，代码如下。

<div id="app">
<p>input 元素：</p> 
<input v-model="message" placeholder="请输入……"> 
<p>消息是: {{ message }}</p> 
</div> 
<script> 
   new Vue({ 
   el: '#app', 
   data: { 
   message: 'hello', 
   } 
}) 
</script> 

输入内容前后的代码运行结果如图1-3和图1-4所示。

在上述实例中，MVVM与Vue的对应关系如下：Model对应数据data；View对应<div id="app"></div>；ViewModel对应new Vue({…})。View和Model可以通过数据绑定的方式相互影响，ViewModel是把Mode和View连接起来的连接器。

图1-3 输入内容前的代码运行结果

图1-4 输入内容后的代码运行结果