理解 MVC 和 MVVM

　　MVC,MVP,MVVM是三种常见的架构模式,它通过分离关注点来改进代码组织方式。不同于设计模式(Design Pattern),只是为了解决一类问题而总结出的抽象方法，一种架构模式往往能使用多种设计模式。

　　MVC模式是MVP,MVVM模式的基础，这两种模式更像是MVC模式的优化改良版,他们三个的 MV 即 Model，view 相同，不同的是MV之间的纽带部分。本文主要介绍MVC与MVVM的应用与区别，因为MVP好像不是很常用。

 

  一、什么是 MVC ?

　后端的开发思想——单向通信

• Model：数据层（存数据、改数据）
• View：视图层（页面展示和dom的操作）
• Controller：控制视图层和数据层的关联，主要通过监听dom事件

　分层的目的：让彼此的职责分开。Controller 是 Model 和 View 的协调者，View 和 Model 不直接联系，基本都是单向联系，必须通过 Controller 来承上启下。

　MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。

 

  二、什么是 MVVM ？

　前端的开发思想——双向绑定

• Model：是data里数据（通过ajax等获取的数据）
• View ：视图层
• VM (ViewModel)：new vue 中 new出来的对象就是VM,是V-M的调度者，提供了数据的双向绑定

　在MVVM架构下，View 和 Model 之间也不直接联系，而是通过VM进行交互，可以说 VM 是连接 View 和 Model 之间的桥梁，它能监听到数据的变化，然后通知视图进行自动更新，而当用户操作视图时，它也能监听到视图的变化，然后通知数据做相应改动，这实际上就实现了数据的双向绑定。

 

优点：

• 耦合低，是真的低，view和model完全分离
• 维护性高，易维护，上手快
• 双向绑定：视图发生变化数据自动同步，数据发生变化视图也自动同步
• 减少了dom的操作，可以更多的关注业务逻辑

 

  三、图理解

　接下来我们通过一张图更好的理解：转自https://www.cnblogs.com/wasbg/p/13297401.html

 

  四、MVVM与MVC的区别

　MVC 和 MVVM 其实区别并不大，都是一种设计思想。主要就是MVC 中 Controller 演变成 MVVM 中的 viewModel。MVVM 主要解决了 MVC 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验

　MVVM 实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。非常的神奇~

　整体看来，MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。因为在MVVM中，View不知道Model的存在，Model和ViewModel也观察不到View，这种低耦合模式提高代码的可重用性。