iOS MVVM 架構模式

隨著 App 邏輯變複雜,將所有程式碼都寫在 View 裡面(這種情況俗稱 "Massive View")會導致難以維護和測試。因此,我們需要一個架構模式來分離職責。SwiftUI 最自然契合的架構就是 MVVM (Model-View-ViewModel)

MVVM 的組成

1. Model (資料模型)

代表單純的資料結構與商業邏輯。它不知道 View 或 ViewModel 的存在。通常是用 struct 定義。

struct TodoItem: Identifiable {
    let id = UUID()
    var title: String
    var isCompleted: Bool
}

2. View (視圖)

負責 UI 呈現。它觀察 ViewModel 的變化並自動更新畫面。它不包含複雜的商業邏輯。

3. ViewModel (視圖模型)

連接 View 與 Model 的橋樑。它負責持有 View 所需的狀態,並處理使用者操作(如呼叫 API、修改 Model)。它必須是一個 class 並遵循 ObservableObject 協議。

實作 MVVM

// 1. Model
struct User {
    var name: String
    var age: Int
}

// 2. ViewModel
class UserViewModel: ObservableObject {
    @Published var user = User(name: "Guest", age: 0) // @Published 讓 View 能觀察變化
    
    func loadUserData() {
        // 模擬網路請求
        user = User(name: "Mike", age: 25)
    }
}

// 3. View
struct UserProfileView: View {
    @StateObject private var viewModel = UserViewModel() // 建立 ViewModel 實體
    
    var body: some View {
        VStack {
            Text("姓名: \(viewModel.user.name)")
            Text("年齡: \(viewModel.user.age)")
            
            Button("載入資料") {
                viewModel.loadUserData()
            }
        }
    }
}

透過 MVVM,View 變得非常乾淨,所有的邏輯都移到了 ViewModel 中,這讓程式碼更容易測試與維護。