MVVM与MVC模型及其区别

拼搏现实的明天。 2022-11-27 10:19 142阅读 0赞

***1、MVVM模型***  
MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。Model指的是后端传递的数据。View指的是所看到的页面。ViewModel 是mvvm模式的核心，它是连接view和model的桥梁。  
在MVVM模式中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离，把Model和View关联起来的就是ViewModel。  
ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model；我们只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。  
总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信（ViewModel通常要实现一个observer观察者），当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc3NzE4NQ_size_16_color_FFFFFF_t_70_pic_center]  
***2、MVC模型***  
MVC是Model-View- Controller的简写。即模型-视图-控制器。M和V指的意思和MVVM中的M和V意思一样。C即Controller指的是页面业务逻辑控制。使用MVC的目的就是将M和V的代码分离。MVC是单向通信。也就是View跟Model，必须通过Controller来承上启下。即：

*  View 传送指令到 Controller ；
 *  Controller 完成业务逻辑后，要求 Model 改变状态 ；
 *  Model 将新的数据发送到 View，用户得到反馈。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc3NzE4NQ_size_16_color_FFFFFF_t_70_pic_center 1]***3、MVVM的优点***
    
     *  a.低耦合：MVVM模式中，数据是独立于UI的，ViewModel只负责处理和提供数据
     *  b.自动同步数据:ViewModel通过双向数据绑定把View层和Model层连接了起来，View和Model这两者可以自动同步。我们不需要手动操作DOM, 不需要关注数据状态的同步问题，MVVM 统一管理了复杂的数据状态维护
     *  c.可重用性：可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑
     *  d.独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计

***4、MVVM和MVC的区别***

*  ViewModel存在目的在于抽离Controller中展示的业务逻辑，而不是替代Controller
 *  mvvm 通过数据来驱动视图层的显示；而MVC是节点操作。
 *  mvvm主要解决了:mvc中大量的DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验的问题
 *  mvc中Model和View是可以直接打交道的，造成Model层和View层之间的耦合度高。而mvvm中Model和View不直接交互，而是通过中间桥梁ViewModel来同步

文章参考转载：  
[https://blog.csdn.net/weixin\_43680581/article/details/104398953][https_blog.csdn.net_weixin_43680581_article_details_104398953]  
[https://blog.csdn.net/le\_17\_4\_6/article/details/88836297][https_blog.csdn.net_le_17_4_6_article_details_88836297]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc3NzE4NQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221124/1fd52e90bb154b85b0784a125159c782.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Njc3NzE4NQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221124/bcb91a49bf80470fae5120f1ae1261d1.png
[https_blog.csdn.net_weixin_43680581_article_details_104398953]: https://blog.csdn.net/weixin_43680581/article/details/104398953
[https_blog.csdn.net_le_17_4_6_article_details_88836297]: https://blog.csdn.net/le_17_4_6/article/details/88836297