前言
上一篇文章 Vue学习——【第二弹】中我们利用浏览器中的Vue开发者工具了解了Vue的相关工作机制，这篇文章介绍Vue的一个架构模型MVVM模型。
何为MVVM模型
MVVM分为三个部分：分别是M（Model，模型层 ），V（View，视图层），VM（ViewModel，V与M连接的桥梁，也可以看作为控制器）
1、 M：模型层，主要负责业务数据相关；
2、 V：视图层，顾名思义，负视图相关，细分下来就是html+css层；
3、 VM：V与M沟通的桥梁，负责监听M或者V的修改，是实现MVVM双向绑定的要点；
MVVM支持双向绑定，意思就是当M层数据进行修改时，VM层会监测到变化，并且通知V层进行相应的修改，反之修改V层则会通知M层数据进行修改，以此也实现了视图与模型层的相互解耦；
再Vue的官方文档中介绍到，Vue没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。
代码实现
简单来说，MVVM模型的原理就是：利用ViewModel（视图模型），将Model（模型）中的data数据和View（视图）联系起来，实现动态的响应。
输出Vue实例
在文档中我们发现介绍到：通常用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例，我们可以通过代码输出下这个Vue实例：
<div id="demo2">
<h2>{
{name}}</h2>
<h3>test1:</h3>
<h3>test2:</h3>
<h3>test3:</h3>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#demo2',
data:{
name:'Vue'
}
})
console.log(vm)
</script>
运行发现，在data中所写入的数据，在vm中都可以找到。
我们可以查看在vm中出现的带有 $ 的数据：
<div id="demo2">
<h2>{
{name}}</h2>
<h3>test1:{
{$options}}</h3>
<h3>test2:{
{$emit}}</h3>
<h3>test3:{
{$children}}</h3>
</div>
<script type="text/javascript">
const vm = new Vue({
el:'#demo2',
data:{
name:'Vue'
}
})
console.log(vm)
</script>
总结
通过运行结果可以看到：
1：在data中我们所写的属性，都会出现在vm上；
2：vm中所包含的所有的属性以及Vue原型上的属性，在Vue模板中都可使用。