El patrón MVVM
Separe las responsabilidades de la vista, el modelo de vista y el modelo.
El patrón MVVM es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Swift Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Swift Academy incluye 4 lecciones en total.
¿Qué es MVVM?
MVVM significa Model-View-ViewModel. Es un patrón arquitectónico que divide la aplicación en tres capas, cada una con una única responsabilidad clara.
- Model — datos y reglas de negocio
- View — lo que ve el usuario
- ViewModel — el puente que prepara los datos de Model para View
El objetivo es la separación de responsabilidades: cada capa cambia por su propio motivo, independientemente de las demás.
La capa Model
Model contiene los datos sin procesar y las reglas que los rigen. No sabe nada de la pantalla ni de cómo se muestran las cosas.
Los modelos suelen ser structs simples u objetos de dominio. Son fáciles de probar porque no tienen dependencias de la interfaz de usuario.
struct User {
let id: UUID
let firstName: String
let lastName: String
let isPremium: Bool
}
struct Order {
let items: [String]
let total: Decimal
}La capa View
View se encarga exclusivamente de presentar la información. En SwiftUI son sus structs View; en UIKit son su UIViewController y sus subvistas.
Una buena View no contiene lógica de negocio. Solo muestra el estado y reenvía las acciones del usuario al ViewModel.
struct ProfileView: View {
@StateObject var viewModel: ProfileViewModel
var body: some View {
VStack {
Text(viewModel.displayName)
if viewModel.showBadge {
Text("Premium")
}
}
}
}La capa ViewModel
ViewModel se sitúa entre Model y View. Toma los datos sin procesar de Model y los transforma en valores preparados para la presentación que View puede mostrar directamente.
También expone intenciones (métodos) que View invoca cuando el usuario interactúa.
final class ProfileViewModel: ObservableObject {
@Published var displayName: String
@Published var showBadge: Bool
init(user: User) {
displayName = user.firstName + " " + user.lastName
showBadge = user.isPremium
}
}¿Por qué separar responsabilidades?
Cuando el formateo, la comunicación de red y el renderizado están mezclados dentro de un controlador de vista, ese archivo se convierte en un bloque enorme imposible de probar.
Al dividir las responsabilidades:
- El Model se puede reutilizar en varias pantallas
- El ViewModel se puede probar mediante pruebas unitarias sin una interfaz de usuario
- La View se mantiene pequeña y declarativa
Qué pertenece al Model
Incluya en Model:
- Entidades del dominio (
User,Product) - Reglas de validación de negocio
- Abstracciones de persistencia y comunicación de red (a menudo mediante servicios que invoca el ViewModel)
No coloque nunca cadenas de texto de la interfaz, colores ni formateo en Model.
Qué pertenece al ViewModel
El ViewModel gestiona la lógica de presentación:
- Formatear fechas, importes y nombres como cadenas para mostrar
- Decidir qué estados de la interfaz son visibles (carga, error, vacío)
- Coordinar llamadas a servicios y exponer resultados
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) ?? "-"
}
}Qué pertenece a la View
La View solo debe:
- Distribuir y mostrar los elementos de la interfaz
- Leer el estado publicado del ViewModel
- Reenviar toques y gestos llamando a métodos del ViewModel
Si encuentra un if que decide reglas de negocio dentro de una View, es probable que esa lógica pertenezca al ViewModel.
Flujo de datos en MVVM
El flujo es unidireccional para los datos y se invierte para las acciones:
- Model -> ViewModel -> View para los datos
- View -> ViewModel para las intenciones del usuario
La View nunca se comunica directamente con Model. Esto mantiene las dependencias dirigidas hacia dentro, hacia el dominio.
MVVM frente a MVC
En el MVC clásico, el controlador suele crecer demasiado porque se encarga a la vez del formateo, la comunicación de red y la conexión con la vista.
MVVM extrae esa lógica de presentación al ViewModel, dejando delgado el controlador (o la View de SwiftUI). El ViewModel es independiente del framework de interfaz de usuario, por lo que resulta mucho más fácil de probar.
Un ejemplo completo
Aquí tiene un ejemplo pequeño pero completo de MVVM que conecta las capas.
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) }
}Comprobación rápida
Compruebe su comprensión de las responsabilidades de MVVM.
Resumen
Ha aprendido las tres capas de MVVM y sus límites:
- Model — datos sin procesar y reglas de negocio, sin interfaz de usuario
- ViewModel — lógica de presentación e intenciones
- View — renderizado puro del estado del ViewModel
Mantener separadas estas responsabilidades hace que el código sea fácil de probar, reutilizar y comprender. A continuación conectará un ViewModel con una View mediante vinculaciones.
Aprende Swift con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 122
- Lecciones
- 409
Preguntas frecuentes
¿La lección «El patrón MVVM» es gratis?
Sí — el texto completo de «El patrón MVVM» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Swift Academy, actualiza a CoddyKit PRO. El curso de Swift Academy incluye 4 lecciones en total.
¿Qué aprenderé en «El patrón MVVM»?
Separe las responsabilidades de la vista, el modelo de vista y el modelo. Practicas Swift Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Swift Academy?
No se requiere experiencia previa. Swift Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «El patrón MVVM»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Swift Academy?
Sí. Cada lección de Swift Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.