iOS应用架构设计：MVC、MVVM、VIPER对比

大家好，我是一名工作了5年的后端开发，平时喜欢把复杂的东西讲简单。最近有不少朋友问我iOS架构设计的问题，我当初学的时候也是一脸懵，所以决定写这篇入门教程，用最简单的语言带你搞懂MVC、MVVM、VIPER这三种架构。

---

开篇：为什么要了解iOS架构？

在iOS开发中，架构设计决定了你的代码是否易于维护、扩展和测试。选择合适的架构，能让你的开发效率大幅提升，代码质量也更可控。

简单来说：

• MVC：最经典，苹果官方推荐，适合小型项目
• MVVM：目前最流行，适合中大型项目
• VIPER：最复杂，适合超大型项目和团队协作

---

环境准备

在开始之前，你需要准备以下工具：

工具	说明
Xcode	苹果官方IDE，从App Store免费下载
Swift	iOS开发语言，Xcode内置支持
Simulator	Xcode自带的模拟器，用于运行App

安装步骤：

1. 打开App Store，搜索"Xcode"并安装
2. 安装完成后打开Xcode，选择"Create a new Xcode project"
3. 选择"App"模板，点击Next
4. 填写项目名称（如"ArchitectureDemo"），语言选择Swift
5. 点击Next，选择保存位置，完成创建

---

核心概念：用大白话解释三种架构

1. MVC（Model-View-Controller）

通俗理解： MVC就像一个餐厅：

• Model（模型）：厨房，负责处理数据
• View（视图）：餐桌，负责展示给用户看
• Controller（控制器）：服务员，负责协调厨房和餐桌

代码示例：

// Model - 数据模型
struct User {
    let name: String
    let age: Int
}

// View - 视图层
class UserView: UIView {
    func showUserInfo(name: String, age: Int) {
        print("姓名: \(name), 年龄: \(age)")
    }
}

// Controller - 控制器层
class UserController {
    let userView = UserView()
    
    func loadUser() {
        // 模拟从网络获取数据
        let user = User(name: "张三", age: 25)
        userView.showUserInfo(name: user.name, age: user.age)
    }
}

MVC的问题： Controller会变得非常臃肿，承担太多职责，这就是著名的"Massive View Controller"问题。

---

2. MVVM（Model-View-ViewModel）

通俗理解： MVVM在MVC基础上加了一个"中间人"——ViewModel：

• Model：还是厨房，负责数据
• View：还是餐桌，负责展示
• ViewModel：厨师长，负责把厨房的数据加工成餐桌需要的格式

代码示例：

import Combine

// Model
struct User {
    let name: String
    let age: Int
}

// ViewModel
class UserViewModel: ObservableObject {
    @Published var displayName: String = ""
    @Published var displayAge: String = ""
    
    private let user: User
    
    init(user: User) {
        self.user = user
        formatData()
    }
    
    private func formatData() {
        displayName = "用户: \(user.name)"
        displayAge = "年龄: \(user.age)岁"
    }
}

// View
struct UserView: View {
    @StateObject var viewModel: UserViewModel
    
    var body: some View {
        VStack {
            Text(viewModel.displayName)
            Text(viewModel.displayAge)
        }
    }
}

MVVM的优势：

• View和ViewModel分离，View只负责展示
• ViewModel可以独立测试
• 代码更清晰，职责更明确

---

3. VIPER（View-Interactor-Presenter-Entity-Router）

通俗理解： VIPER把职责分得更细，像一个完整的公司：

• View：前台，负责展示
• Interactor：业务部门，负责处理业务逻辑
• Presenter：项目经理，负责协调
• Entity：数据部门，负责数据管理
• Router：导航部门，负责页面跳转

代码示例：

// Entity - 数据实体
struct User {
    let name: String
    let age: Int
}

// Interactor - 业务逻辑
protocol UserInteractorInput {
    func fetchUser()
}

protocol UserInteractorOutput: AnyObject {
    func didFetchUser(_ user: User)
}

class UserInteractor: UserInteractorInput {
    weak var output: UserInteractorOutput?
    
    func fetchUser() {
        // 模拟网络请求
        let user = User(name: "李四", age: 30)
        output?.didFetchUser(user)
    }
}

// Presenter - 协调者
protocol UserPresenterInput {
    func viewDidLoad()
}

protocol UserPresenterOutput: AnyObject {
    func showUser(name: String, age: String)
}

class UserPresenter: UserPresenterInput {
    weak var view: UserPresenterOutput?
    var interactor: UserInteractorInput!
    
    func viewDidLoad() {
        interactor.fetchUser()
    }
}

extension UserPresenter: UserInteractorOutput {
    func didFetchUser(_ user: User) {
        view?.showUser(name: user.name, age: "\(user.age)")
    }
}

// View - 视图
class UserViewController: UIViewController, UserPresenterOutput {
    var presenter: UserPresenterInput!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        presenter.viewDidLoad()
    }
    
    func showUser(name: String, age: String) {
        print("显示用户: \(name), 年龄: \(age)")
    }
}

// Router - 路由
class UserRouter {
    static func createModule() -> UserViewController {
        let view = UserViewController()
        let presenter = UserPresenter()
        let interactor = UserInteractor()
        
        view.presenter = presenter
        presenter.view = view
        presenter.interactor = interactor
        interactor.output = presenter
        
        return view
    }
}

VIPER的特点：

• 职责分离非常彻底
• 代码量较大，但结构清晰
• 适合大型项目和多人协作

---

实战项目：用MVVM实现一个简单的用户列表

让我们用MVVM架构实现一个用户列表App。

项目结构：

UserListApp/
├── Models/
│   └── User.swift
├── ViewModels/
│   └── UserListViewModel.swift
├── Views/
│   ├── UserListView.swift
│   └── UserRowView.swift
└── Services/
    └── UserService.swift

步骤1：创建数据模型

// Models/User.swift
struct User: Identifiable {
    let id = UUID()
    let name: String
    let email: String
}

步骤2：创建数据服务

// Services/UserService.swift
class UserService {
    func fetchUsers() async -> [User] {
        // 模拟网络延迟
        try? await Task.sleep(nanoseconds: 1_000_000_000)
        
        return [
            User(name: "张三", email: "zhangsan@example.com"),
            User(name: "李四", email: "lisi@example.com"),
            User(name: "王五", email: "wangwu@example.com")
        ]
    }
}

步骤3：创建ViewModel

// ViewModels/UserListViewModel.swift
import Foundation

class UserListViewModel: ObservableObject {
    @Published var users: [User] = []
    @Published var isLoading = false
    @Published var errorMessage: String?
    
    private let userService = UserService()
    
    func loadUsers() async {
        isLoading = true
        errorMessage = nil
        
        do {
            let users = await userService.fetchUsers()
            self.users = users
        } catch {
            errorMessage = "加载失败: \(error.localizedDescription)"
        }
        
        isLoading = false
    }
}

步骤4：创建视图

// Views/UserRowView.swift
import SwiftUI

struct UserRowView: View {
    let user: User
    
    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text(user.name)
                .font(.headline)
            Text(user.email)
                .font(.subheadline)
                .foregroundColor(.gray)
        }
    }
}

// Views/UserListView.swift
import SwiftUI

struct UserListView: View {
    @StateObject private var viewModel = UserListViewModel()
    
    var body: some View {
        NavigationView {
            Group {
                if viewModel.isLoading {
                    ProgressView("加载中...")
                } else if let error = viewModel.errorMessage {
                    Text(error)
                        .foregroundColor(.red)
                } else {
                    List(viewModel.users) { user in
                        UserRowView(user: user)
                    }
                }
            }
            .navigationTitle("用户列表")
            .task {
                await viewModel.loadUsers()
            }
        }
    }
}

步骤5：运行项目

在ContentView.swift中调用：

import SwiftUI

@main
struct UserListApp: App {
    var body: some Scene {
        WindowGroup {
            UserListView()
        }
    }
}

运行项目，你会看到一个简洁的用户列表界面。

---

三种架构对比总结

特性	MVC	MVVM	VIPER
复杂度	低	中	高
代码量	少	中	多
可测试性	差	好	非常好
适用场景	小型项目	中大型项目	超大型项目
学习曲线	平缓	中等	陡峭
团队协作	一般	好	非常好

---

常见问题解答

Q1：新手应该从哪种架构开始学？

A：建议从MVC开始，理解基本概念后再学MVVM。MVVM是目前最实用的选择，大部分项目都可以用。

Q2：MVVM和MVC可以混用吗？

A：可以，但建议保持一致性。一个项目中最好统一使用一种架构。

Q3：VIPER会不会太重了？

A：对于小项目来说确实太重了。但如果你的项目很大，团队人数多，VIPER的严格分层会让代码更易维护。

Q4：如何判断Controller是否太臃肿？

A：如果你的Controller超过500行，或者包含了业务逻辑、数据处理等职责，就需要考虑重构了。

---

学习建议

1. 循序渐进：先掌握MVC，再学MVVM，最后了解VIPER
2. 多实践：每学一种架构，都要动手写代码练习
3. 看开源项目：GitHub上有很多优秀的iOS开源项目，学习他们的架构设计
4. 不要过度设计：小项目用MVC就够了，不要为了用架构而用架构

避坑指南：

• ❌ 不要一开始就学VIPER，容易劝退
• ❌ 不要把View的逻辑写到ViewModel里
• ❌ 不要忽略单元测试，好的架构应该易于测试
• ✅ 多参考苹果官方的示例代码
• ✅ 保持代码简洁，遵循单一职责原则

---

写在最后

架构设计没有绝对的好坏，只有适合不适合。我当初学的时候也踩过很多坑，希望这篇教程能帮你少走弯路。

记住：好的架构是让代码更易维护，而不是更复杂。

如果你觉得这篇文章对你有帮助，欢迎分享给更多的小伙伴。技术分享的路上，我们一起进步！

---

本文关键词：Suno、GPT-4o、技术分享、Anthropic