三分钟让你了解MVC和MVVM模式

悠悠 2023-02-15 15:53 62阅读 0赞

> 1.MVC关注的是Model的不变，所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。
> 
> 2.MVVM是一种更好的UI模式解决方案，MVVM通过数据双向绑定让数据自动地双向同步。

# MVC设计模式 #

View（视图层）       Model（模型）     Controller（控制器）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70][]

*  View 传送指令到 Controller
 *  Model 将新的数据发送到 View，用户得到反馈
 *  Controller 完成业务逻辑后，要求 Model 改变状态

用户与View进行交互，Controller进行业务逻辑处理，控制器从模型中请求数据，并反馈给视图层，视图将数据呈现给用户。

# MVVM设计模式 #

Model（模型）    View（视图）  View Model（视图模型）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 1][]

*  V    HTML元素
 *  VM    View-Model
 *  M     模型数据（json->\{\},\[\] ）

> **MVVM与MVC最大的区别：**MVVM实现了View和Model的自动同步，也就是当Model的属性改值变时，我们不用再自己手动操作Dom元素，来改变View的显示，而是改变属性后该属性对应View层显示会自动改变。

MVVM代表框架：Angularjs、React、Vue。  
MVVM主要解决了MVC中大量 DOM元素操作，使得页面渲染性能降低，加载速度变慢，影响用户体验。

\--------------如果大家喜欢我的博客，可以点击左上角的关注哦。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200606132739516.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200606133338256.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1amluXw==,size_16,color_FFFFFF,t_70