MVC与MVVM的特点及区别

一、什么是MVC和MVVM架构模式：

MVC、MVVM是两种常见的前端架构模式，这种架构模式是抽象分离出来的为了解决某一类问题的方法。一种架构模式也可以派生出很多的设计模式，从而来解决不同的问题。

MVC和MVVM中的特点：

• 相同点：其中M指的是MODEL，V指的是VIEW

• 不同点：这两种架构中，不同的只是MV之间的纽带部分。

二、MVC:

MVC架构指的是MODEL-VIEW-CONTROLLER，MVC允许在不改变视图的情况下，改变用户对视图输入的响应方式，用户的VIEW操作交给了CONTROLLER处理，在CONTOROLLER中响应VIEW的事件调用MODEL的接口对数据进行操作，只要MODEL发生变化，就像应给相关的视图进行更新操作。

如果用原生的HTML+CSS+JS来比喻形容的话，可以比作用户通过HTML（VIEW）层操作，JS（CONTROLLER）通过事件监听，监听到VIEW的变动，然后通过AJAX（MODEL）进行数据的交互（向服务器端的接收和发送）。随即跟新数据。

三：MVVM：

这里的VM指的是:VIEWMODEL

MVVM和MVC模型的最大区别是：实现了VIEW和MODELd的自动更新，也就是说，当MODEL的属性发生改变是，我们不再自己手动的操作DOM，而是改变之后的属性对应的VIEW层会自动的发生改变。因为在MVVM中，View不知道Model的存在，Model和ViewModel也观察不到View，这种低耦合模式提高代码的可重用性。典型的对应的前端的框架：VUE。

 

例如，在VUE的模板语法中，可以通过双向数据绑定来将HTML(MODEL)中的双向数据绑定VIEWMODEL在组件的DATA中，当捕捉到MODEL层中的数据发生变化时VIEW中也会发生变化，同样当VIEW中的数据发生变化时，MODEL中的数据也会发生变化。VUE中这种双向数据绑定的形式就是典型的MVVVM型的架构。

 

四：总结：

总的来说MVVM比MVP精简很多，一定程度上简化了界面与业务的依赖性，也解决了数据的频繁更新的问题。对于这两种模式，可能比较复杂的情况下分不清到底哪里是MODEL哪里是VIEW，但是个人觉得，在实际的开发中，大可不必纠结。只要熟练掌握架构的思想，针对不同的业务环境，选择最适合的架构来解决问题就OK。