前言

何为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模板中都可使用。

参考文献