首先要弄清楚 MVVM 模型的概念并不是由 Vue 缔造的，通过 Vue 的官网了解到 Vue 也是在一定程度上受到了 MVVM 模型的启发，并没有完全遵循 MVVM 模型。

在这里也就不会长篇大论的去讲解 MVVM 模型了，主要说说 Vue 在受到 MVVM 模型的启发后设计出来的 Vue 所独有的模型是分为几个部分的，还有每个部分都是干啥的。

 Vue 的 MVVM 模型

1. M：模型（Model）：Vue 实例中 data 配置项里的数据。

2. V：视图（View）：模板。

3. VM：视图模型（ViewModel）：Vue 实例对象。

拆解 MVVM 模型

M：模型（Model）

“一般js对象”就是{}，Vue 实例中 data 配置项如果用对象式的写法那么它本身的值就是一个对象，在对象中再去定义其他的属性。如果是函数式的写法，那么就要在 data 函数中用 return 返回一个对象，对象里再去定义其他属性。 

V：视图（View）

在浏览器中看到的页面都是由 Vue 模板进行解析渲染成页面，从而再生成 DOM 元素。

VM：视图模型（ViewModel）

红色框中的大方块就是由 Vue 缔造的实例对象，通过实例对象实现页面与数据的绑定与监听。

Data Bindings与DOM Listeners

在代码中展示MVVM模型 

在代码中每个框住的部分都与 MVVM 模型一一对应。

总结

其实主流的前端框架多多少少都遵循了 MVVM 模型的原则，都是通过 VM（视图模型）将 V（视图）与 M（模型）建立连接，只不过不同的框架的语法有所不同，大体上的逻辑都是一样的。