Vue学习日记之MVC与MVVM

1、为何要了解MVC与MVVM模式

  首先，MVC是后端的分层处理概念，M指的是Model数据处理层，V指的是view视图层，C指的是controll业务逻辑处理层，MVC的出现使得一个项目的开发变得更加简便和清晰，降低了代码之间的耦合程度，项目之间的分功也更加的明确，这时你可能要问了，我们是在学习vue，而且我们是前端工程师，为什么还要了解MVC呢？

  其实，了解MVC有助于我们学习MVVM，而Vue更是MVVM中的集大成者，更加贯彻了MVVM的双向绑定精髓

  MVVM是前端的概念，最主要思想是同MVC一样，将数据，业务逻辑，视图分隔开，使得编写代码更加得容易！！！关键是，我们再也不用DOM操作了！彻底解放你的双手！！！

2、MVC模式

2.1 基本思想

  前面提到过MVC是后端处理的概念，主要得思想是，将数据，业务逻辑，视图隔离开，降低代码耦合度，实现职能单一原则

2.2 MVC代表的含义

  2.2.1 M---model

   M代表的是model，作用是，数据的CRUD操作，CRUD操作是什么呢？C---create，创建数据。R---read，读取数据。U---update，更新数据。D---delete，删除数据。简而言之就是数据的处理操作，这一层是跟数据库打交道。

  2.2.2 V---view

   V代表的是view，作用是，呈现从M取出的数据（这里不太准确），与用户直接关联的页面，如果更通俗点来讲就是，用户界面也就是前端页面

  2.2.3 C---controll

   C代表的是controll，作用是，项目的业务的逻辑处理。它本身不做任何事情，只是将view请求，传给对应的model去处理请求，再决定用哪个view来显示返回的数据

2.3  举个例子

  我们将MVC可以看成是一一种餐馆模式，M---是厨师，对菜品（数据）的加工（CRUD）。V---是菜单和店面，呈现给顾客（用户）的。C---是服务员，负责处理顾客的点菜需求。

   当一名顾客来到餐馆，第一眼看到的是店面和菜单，此时顾客选择了喜欢的菜品，便告诉服务员（controll），服务员拿着菜单，进入后厨（服务器），看着菜单，选择性的告诉某个厨师，顾客的要求，厨师（model）根据服务员的指示，对菜品进行加工，加工完毕后，服务员拿走菜品，送到餐桌上（view）。这就是一个简单的MVC模式。

 

3、MVVM模式

  3.1 基本思想

   跟MVC一样，在前端页面充满了大量的html，css以及js文件中时，我们需要很好的对前端页面进行解耦，于是我们迫切的需要一个类似MVC的模式，来对前端页面进行解耦处理，MVVM应势而生

（此图来自https://www.cnblogs.com/iovec/p/7840228.html，侵删）

  3.2 MVVM代表的含义

  3.2.1 M

    这里的M与MVC里的M一样也是Model，代表的是数据模型，涉及的东西非常多。

  3.2.2 V

   这里的V与MVC里的一样，同样是View，代表的是用户界面，展示来自ViewModel或者Model的数据

  3.2.3 VM

   VM是MVVM中的重点，指的是：ViewModel，它位于Model与View层之间，是一个数据的中转站，类似MVC中的C，但又不仅仅是那么简单，它能将Model中的数据转换，做二次封装，生成符合View层适合的数据模型，最重要的是，它与View层实现了双向绑定，View层显示的数据是ViewModel中的数据，这个数据是实时的，当我们修改ViewModel中的数据，不用我们进行另外的操作，View层的数据已经更新了！！！也就是说，我们不需要自己去修改DOM了，ViewModel已经帮我们做好了，我们只需要关注ViewModel就行了！！

3.3 举个例子

  首先让我们来看看MVVM整体在前端页面的示意图

   （此图来自https://www.cnblogs.com/iovec/p/7840228.html，侵删）

  View层实例：

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

ViewModel层实例

 var vm=new Vue({
        el:"#app",
        data:{
            message:"实现了双向绑定！！"
        }
    })

结果页面：

打开控制台

此时，不需要刷新页面，我们可以发现

  这里我们没有涉及到Model，但是原理也是跟上面讲的一致。

 

4、总结

  我们简单的了解了MVC与MVVM模式，重要的不是哪个模式更好，而是，哪个模式更适合我们现在的项目，像Vue就实现了MVVM，让我们感觉到编写代码的方便，也解耦了Model和View。