1.4　MVVM模式

MVVM是Model-View-ViewModel的缩写，它是一种基于前端开发的架构模式，其核心是提供对View和ViewModel的双向数据绑定，这使得一方更新时可自动传递到另一方，即所谓的数据双向绑定。

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

ViewModel是Vue.js的核心，它是一个Vue实例。图1-13概述了MVVM模式，同时也描述了在Vue.js里面ViewModel是怎样和View及Model进行交互的。

图1-13　MVVM模式

下面来说一下双向绑定究竟是如何达成的。

首先，我们观看图1-13，把当中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。当View层中的DOM元素和Model中的数据绑定成功后，ViewModel中的DOM Listeners工具会帮我们监测View层中的DOM元素的变化，如果有变化则Model中的数据也进行同样的变化，反过来当Model中的数据更新时，Data Bindings工具则会帮我们更新View层中的DOM元素。

下面再通过例1-4来帮助我们进一步掌握双向绑定。MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

【例1-4】演示MVVM模式。

运行结果：

代码解析：此例通过使用v-model指令把{{property}}和文本框进行绑定。第12行在创建Vue实例时，传入了一个选项对象。选项对象的el属性指向View，data属性指向Model，如此就实现了双向绑定。这样，{{property}}和文本框一方更新，则另一方也会做同样的更新。