MVC、MVP和MVVM的区别

MVC、MVP、MVVM 架构模式对比

1. MVC (Model-View-Controller)

架构图

┌─────────┐    ┌───────────┐    ┌──────┐
│   View  │───►│Controller │───►│ Model│
└─────────┘    └───────────┘    └──────┘▲                              │└──────────────────────────────┘

通信流程

1. 用户操作 View 触发事件
2. View 调用 Controller 处理用户输入
3. Controller 操作 Model 更新数据
4. Model 数据变化后直接通知 View 更新
5. View 从 Model 获取最新数据并刷新显示

特点

• View 知道 Model 的存在，直接监听 Model 变化
• Controller 相对薄，主要职责是路由和协调

代码示例

// Model - 数据和业务逻辑
class UserModel {constructor(public name: string, public email: string) {}updateUser(name: string, email: string) {this.name = name;this.email = email;}
}// View - 用户界面
class UserView {displayUser(user: UserModel) {// Model 更新后会自动通知 Viewconsole.log(`Name: ${user.name}, Email: ${user.email}`);}
}// Controller - 协调者
class UserController {constructor(private model: UserModel, private view: UserView) {}handleUserUpdate(name: string, email: string) {this.model.updateUser(name, email);   }
}

2. MVP (Model-View-Presenter)

架构图

通信流程

1. 用户操作 View 触发事件
2. View 调用 Presenter 处理用户输入
3. Presenter 操作 Model 更新数据
4. Model 返回结果给 Presenter
5. Presenter 手动更新 View 的状态和显示

特点

• View 与 Model 完全解耦，彼此不知道对方的存在
• Presenter 较厚，包含大量的展示逻辑
• 单向数据流，所有通信都通过 Presenter 中转

代码示例

// View 接口
interface IUserView {showUserName(name: string): void;showUserEmail(email: string): void;showLoading(): void;hideLoading(): void;
}// Presenter - 展示逻辑
class UserPresenter {constructor(private model: UserModel, private view: IUserView) {}onLoadUser() {this.view.showLoading();// 从 Model 获取数据const userData = this.model.getUserData();// 手动更新 Viewthis.view.showUserName(userData.name);this.view.showUserEmail(userData.email);this.view.hideLoading();}onUpdateUser(name: string, email: string) {this.model.updateUser(name, email);// 手动同步到 Viewthis.view.showUserName(name);this.view.showUserEmail(email);}
}

3. MVVM (Model-View-ViewModel)

架构图

通信流程

1. View 通过数据绑定自动反映 ViewModel 的状态
2. 用户操作触发 ViewModel 的命令
3. ViewModel 操作 Model 更新数据
4. Model 更新后，ViewModel 状态自动变化
5. View 通过双向绑定自动更新显示

特点

• 双向数据绑定是核心机制
• ViewModel 不知道 View 的存在，完全解耦
• 声明式编程

代码示例

// View (使用数据绑定)<input v-model="userName">

对比总结

特性	MVC	MVP	MVVM
View 职责	展示数据，监听 Model	展示数据，转发用户输入	展示，通过绑定自动更新
中间层职责	Controller：路由协调	Presenter：展示逻辑	ViewModel：视图状态管理
数据流向	双向（View↔Controller↔Model）	单向（View→Presenter→Model→Presenter→View）	双向自动绑定
View 与 Model 关系	View 知道 Model	完全解耦	通过 ViewModel 间接连接

关键区别总结

• 依赖方向：MVC 中 View 依赖 Model，MVP 中 View 和 Model 完全隔离，MVVM 中 View 依赖 ViewModel

参考文章：MVC，MVP 和 MVVM 的图示