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 更新后会自动通知 View
        console.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();
        // 手动更新 View
        this.view.showUserName(userData.name);
        this.view.showUserEmail(userData.email);
        this.view.hideLoading();
    }
    
    onUpdateUser(name: string, email: string) {
        this.model.updateUser(name, email);
        // 手动同步到 View
        this.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 的图示