对vue中的MVVM的理解（对比MVC）

后端中的 MVC 与前端中的 MVVM 之间的区别

MVC 是后端的分层开发概念，主要分为 Model, View , Controller
MVVM是前端视图层的概念，主要关注于视图层分离，MVVM把前端的视图层分为了三部分 Model, View , VM ViewModel

MVVM 简单来说解决了使用MVC中 “控制器依赖视图的结构，导致视图不可以随便修改” 的问题。

MVVM 的核心是 ViewModel 层，负责转换 Model 中的数据对象让数据变得更容易管理和使用，其作用如下：

该层向上与视图层进行双向数据绑定
向下与 Model 层通过接口请求进行数据交互

结合下图了解MVC 和 MVVM数据的处理过程：

从上图可以看到MVC和MVVM之间的区别：

绿色边框中的 Model , View , Controller 层，是后端的 MVC，它是站在整个项目的角度，充分考虑了前端和后端，把项目划分为了三层
红色边框的就是我们的MVVM，这个概念只针对于我们的前端视图层，它的位置就在 View 视图层中，它是把前端的每个页面划分为了三层（M、V、VM）
MVVM是前端视图层的分层开发思想，主要把每个页面分成了M、V 和 VM，其中， VM 是 MVVM 思想的核心，因为VM 是M 和 V 之间的调度者
前端页面中使用MVVM 的思想，主要是为了让我们开发更加方便，因为 MVVM 提供了数据的双向绑定（是由VM提供的双向绑定）

怎么理解MVVM中的M、V 和 VM？

导入vue：（这里我的包是在lib目录下的）

<!-- 1. 导入Vue的包 -->
<script src="./lib/vue-2.4.0.js"></script>

代码：

（无注解版）：

<body>

  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        msg: '欢迎学习Vue'
      }
    })
  </script>

</body>

（结合注解）：

<body>

  <!-- 将来 new 的Vue实例，会控制这个 元素中的所有内容 -->
  <!-- Vue 实例所控制的这个元素区域，就是我们的 V  -->
  <div id="app">
    <p>{{ msg }}</p>
  </div>

  <script>

    //  2.创建一个Vue的实例
    //  当我们导入包之后，在浏览器的内存中，就多了一个 Vue 构造函数
    //  注意：我们 new 出来的这个 vm 对象，就是我们 MVVM中的 VM调度者
    var vm = new Vue({

      el: '#app',  // 表示，当前我们 new 的这个 Vue 实例，要控制页面上的哪个区域

      // 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的
      data: { // data 属性中，存放的是 el 中要用到的数据

        msg: '欢迎学习Vue' // 通过 Vue 提供的指令，很方便的就能把数据渲染到页面上，程序员不再手动操作DOM元素了【前端的Vue之类的框架，不提倡我们去手动操作DOM元素了】

      }

    })

  </script>

</body>

可以发现，