MVVM-mönstret
Separera ansvar för vy, view model och modell.
MVVM-mönstret är en gratis lektion i Swift Academy på CoddyKit. Detta är lektion 1 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för Swift Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Swift Academy innehåller totalt 4 lektioner.
Vad är MVVM?
MVVM står för Model-View-ViewModel. Det är ett arkitekturmönster som delar upp appen i tre lager, där varje lager har ett enda tydligt ansvarsområde.
- Model — data och affärsregler
- View — det användaren ser
- ViewModel — bryggan som förbereder Model-data för View
Målet är separation av ansvarsområden: varje lager ändras av sin egen anledning, oberoende av de andra.
Model-lagret
Model innehåller rådata och reglerna som styr den. Model känner inte till skärmen eller hur saker visas.
Models är vanligtvis enkla strukturer eller domänobjekt. De är enkla att testa eftersom de saknar beroenden till UI.
struct User {
let id: UUID
let firstName: String
let lastName: String
let isPremium: Bool
}
struct Order {
let items: [String]
let total: Decimal
}View-lagret
View är enbart presentationslogik. I SwiftUI är det era View-strukturer; i UIKit är det er UIViewController och dess underordnade vyer.
En bra View innehåller ingen affärslogik. Den renderar bara tillstånd och vidarebefordrar användarens åtgärder till ViewModel.
struct ProfileView: View {
@StateObject var viewModel: ProfileViewModel
var body: some View {
VStack {
Text(viewModel.displayName)
if viewModel.showBadge {
Text("Premium")
}
}
}
}ViewModel-lagret
ViewModel ligger mellan Model och View. Den tar rådata från Model och omvandlar den till presentationsklara värden som View kan visa direkt.
Den exponerar också intentioner (metoder) som View anropar när användaren interagerar med den.
final class ProfileViewModel: ObservableObject {
@Published var displayName: String
@Published var showBadge: Bool
init(user: User) {
displayName = user.firstName + " " + user.lastName
showBadge = user.isPremium
}
}Varför separera ansvarsområden?
När formatering, nätverkskommunikation och rendering är hoptrasslade i en view controller blir filen en enorm, otestbar klump.
Genom att dela upp ansvaret:
- kan Model återanvändas på flera skärmar
- kan ViewModel enhetstestas utan ett UI
- förblir View liten och deklarativ
Vad hör hemma i Model
Placera följande i Model:
- Domänentiteter (
User,Product) - Regler för affärsvalidering
- Abstraktioner för beständig lagring och nätverkskommunikation (ofta via tjänster som ViewModel anropar)
Aldrig UI-strängar, färger eller formatering i Model.
Vad hör hemma i ViewModel
ViewModel hanterar presentationslogik:
- Formaterar datum, valutor och namn till visningssträngar
- Avgör vilka UI-tillstånd som är synliga (laddar, fel, tomt)
- Samordnar anrop till tjänster och exponerar resultaten
final class CartViewModel: ObservableObject {
@Published var totalText: String = ""
func update(with order: Order) {
let formatter = NumberFormatter()
formatter.numberStyle = .currency
totalText = formatter.string(from: order.total as NSNumber) ?? "-"
}
}Vad hör hemma i View
View ska endast:
- Placera ut och rendera UI-element
- Läsa publicerat tillstånd från ViewModel
- Vidarebefordra tryck och gester genom att anropa metoder i ViewModel
Om ni hittar ett if i View som avgör affärsregler hör logiken troligen hemma i ViewModel.
Dataflöde i MVVM
Data flödar i en riktning och åtgärder i motsatt riktning:
- Model -> ViewModel -> View för data
- View -> ViewModel för användarens intentioner
View kommunicerar aldrig direkt med Model. Det gör att beroenden riktas inåt mot domänen.
MVVM jämfört med MVC
I klassisk MVC blir controllern ofta enorm eftersom den samtidigt ansvarar för formatering, nätverkskommunikation och kopplingen till vyn.
MVVM flyttar presentationslogiken till ViewModel och låter controllern (eller SwiftUI View) förbli tunn. ViewModel är oberoende av UI-ramverket och är därför mycket enklare att testa.
En komplett del
Här är en liten men komplett MVVM-del som kopplar samman lagren.
struct Account { let balance: Decimal }
final class AccountViewModel: ObservableObject {
@Published var balanceText: String
init(account: Account) {
balanceText = "$" + "\(account.balance)"
}
}
struct AccountView: View {
@StateObject var viewModel: AccountViewModel
var body: some View { Text(viewModel.balanceText) }
}Snabb kontroll
Testa er förståelse av MVVM-lagrens ansvarsområden.
Sammanfattning
Ni har lärt er MVVM:s tre lager och deras gränser:
- Model — rådata och affärsregler, utan UI
- ViewModel — presentationslogik och intentioner
- View — ren rendering av ViewModel-tillstånd
När dessa ansvarsområden hålls isär blir koden testbar, återanvändbar och lätt att förstå. Härnäst ska ni koppla en ViewModel till en View med bindningar.
Lär dig Swift med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 122
- Lektioner
- 409
Vanliga frågor
Är lektionen ”MVVM-mönstret” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Swift Academy, inklusive ”MVVM-mönstret”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i Swift Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”MVVM-mönstret”?
Separera ansvar för vy, view model och modell. Ni övar på Swift Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Swift Academy?
Du behöver inga förkunskaper. Utbildningen i Swift Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”MVVM-mönstret”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Swift Academy-lektionen?
Ja. Varje Swift Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.