从MVC到MVVM

MVVM的理解

• 首先MVVM的的思想来自于后端MVC的设计模式思想被应用于前端响应式的框架中，这也是从前端MVC的思想发展出来的产物

  1. MVC即(模型 视图 控制器)

  • M(Model)一般是数据： 不管从前端角度还是从后端角度考虑都是数据的概念， 只不过前端含义的数据是通过接口从后端获取的数据或者是我们本地的静态数据，后端含义的数据是统一叫数据源

  • V(View)视图层: 最直观的体现就是终端。我的理解是对于前端的视图指的是所以的终端(包含接口的触发源), 对于后端来说我理解的是数据控制层触发源。当前前端目前的框架Vue React 最主要的定位就是View层面

  • C(controller)控制器：就是接收事件源到数据层面的逻辑控制，用于实现前端View视图和Model数据之间交互的桥梁

  2. MVC为什么不适用前端架构？

     • 我的理解：
       1. 前端在交互的过程中，使用MVC通过C控制器对于数据难以同步，会频繁的操作视图和数据层面，对于数据同步难以控制，就产生了MVVM的概念
       2. MVC前端架构对于三者， 前端主要关注视图层面

  3. MVVM的好处

     

     1. 前端操作视图可以立即通vm反应到数据中，对于数据同步统一，数据更改可以立即反馈到视图中， 前端View通过DefineReactive原理Object.defineProperty实现，最直观的体现就是(v-model), React中通过setState进行实现，
     2. 模型 -> 视图: 即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定
     3. 视图 -> 模型：DOM页面转化为后端数据 实现方式是：DOM事件监听
     4. 在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定

4. 缺点：

   1.数据绑定使得Bug很难被调试。你看到界面异常了，有可能是你View的代码有Bug，也可能是Model的代码有问题。数据绑定使得一个位置的Bug被快速传递到别的位置，要定位原始出问题的地方就变得不那么容易了。

   2.一个大的模块中model也会很大，虽然使用方便了也很容易保证了数据的一致性，当时长期持有，不释放内存就造成了花费更多的内存。

   3.数据双向绑定不利于代码重用。客户端开发最常用的重用是View，但是数据双向绑定技术，让你在一个View都绑定了一个model，不同模块的model都不同。那就不能简单重用View了。