前端MVC、MVP、MVVM三种架构模式对比（限前端范畴）

我会带着你远行 2023-02-16 12:25 49阅读 0赞

## MVC ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]

### 问题： ###

1.  `View`不能独立处理用户事件
2.  一个`View`对应一个`Model`，复用性差
3.  适合无界面、多业务处理的后端使用

### 模式 ###

主要使用的是策略模式

## MVP ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]

### 改良： ###

1.  用户事件由`View`处理
2.  `Model`与`View`完全解耦，`View`可抽离为接口提供给上层使用
3.  `View`可抽离为独立组件，适合事件处理

### 问题 ###

`Model`与`View`的数据同步需要`Presenter`手动绑定，`Presenter`过重

### 模式 ###

主要使用的是观察者模式

## MVVM ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]

### 改良 ###

`View`与`Model`自动同步，只需要指定`View`要显示的数据对应哪一部分的`Model`即可。这种架构模式目前是最适合前端使用的。

## 总结 ##

1.  `MV*`的目的是把数据、业务逻辑、界面三块解耦，分离关注点
2.  业务逻辑不再关注底层数据读写，而数据以对象形式导给业务逻辑
3.  前端以界面逻辑为主

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2020061008574040.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020061008574044.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMyOTI1MDMx,size_16,color_FFFFFF,t_70