前言

上一篇文章 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>