Vincular modelos de vista con vistas
Conecte los modelos de vista con SwiftUI y Combine.
Vincular modelos de vista con vistas es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 2 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.
Conectar ViewModel con View
Un ViewModel solo resulta útil cuando la View reacciona a sus cambios. En SwiftUI, esta reactividad se basa en los property wrappers de Combine @Published, @StateObject y @ObservedObject.
En conjunto, forman una vinculación automática: cuando cambia el ViewModel, la View vuelve a renderizarse.
ObservableObject
Para que SwiftUI lo observe, un ViewModel debe ajustarse al protocolo ObservableObject. Este protocolo le proporciona un publisher objectWillChange que se activa antes de cualquier cambio.
final class CounterViewModel: ObservableObject {
@Published var count: Int = 0
func increment() {
count += 1
}
}Propiedades @Published
Marcar una propiedad con @Published emite automáticamente una notificación de cambio cada vez que se establece su valor.
Cada propiedad @Published alimenta el publisher objectWillChange del objeto, por lo que la View sabe exactamente cuándo debe actualizarse.
final class SearchViewModel: ObservableObject {
@Published var query: String = ""
@Published var results: [String] = []
}@StateObject
@StateObject indica a una View que cree y sea propietaria de un ViewModel. SwiftUI lo instancia una vez y lo mantiene activo durante las nuevas renderizaciones de esa View.
Utilice @StateObject donde se cree por primera vez el ViewModel.
struct CounterView: View {
@StateObject private var viewModel = CounterViewModel()
var body: some View {
Button("Count: \(viewModel.count)") {
viewModel.increment()
}
}
}@ObservedObject
@ObservedObject se utiliza para un ViewModel que se creó en otro lugar y se pasó a la View. La View lo observa, pero no es responsable de su ciclo de vida.
Utilícelo en vistas hijas que reciben un ViewModel de una vista principal.
struct BadgeView: View {
@ObservedObject var viewModel: CounterViewModel
var body: some View {
Text("Total: \(viewModel.count)")
}
}StateObject frente a ObservedObject
La diferencia fundamental es la propiedad:
- @StateObject — la View es propietaria; sobrevive a las nuevas renderizaciones
- @ObservedObject — se pasa desde fuera; la View no es su propietaria
Usar @ObservedObject cuando debería usar @StateObject puede hacer que el objeto se vuelva a crear y pierda su estado con cada actualización de la vista principal.
Pasar un ViewModel a las vistas hijas
Cree el ViewModel una vez con @StateObject en la vista principal y, después, páselo a las vistas hijas, que lo marcarán con @ObservedObject.
struct ParentView: View {
@StateObject private var viewModel = CounterViewModel()
var body: some View {
VStack {
BadgeView(viewModel: viewModel)
Button("Add") { viewModel.increment() }
}
}
}Vinculaciones bidireccionales
Para entradas como los campos de texto, necesita una Binding bidireccional. SwiftUI genera una a partir de una propiedad @Published utilizando el prefijo $ del wrapper.
struct SearchView: View {
@StateObject private var viewModel = SearchViewModel()
var body: some View {
TextField("Search", text: $viewModel.query)
}
}Controlar el estado de la interfaz
La View debe derivar todo lo que muestra a partir de propiedades publicadas. Los indicadores de carga, los banners de error y el contenido fluyen del estado del ViewModel.
final class FeedViewModel: ObservableObject {
enum State { case loading, loaded([String]), error(String) }
@Published var state: State = .loading
}Reaccionar al estado
La View cambia según el estado del ViewModel para mostrar la interfaz adecuada. No hay código imperativo para mostrar u ocultar elementos, solo una asignación declarativa.
struct FeedView: View {
@StateObject var viewModel = FeedViewModel()
var body: some View {
switch viewModel.state {
case .loading: ProgressView()
case .loaded(let items): List(items, id: \.self) { Text($0) }
case .error(let message): Text(message)
}
}
}Mantener las actualizaciones en el hilo principal
SwiftUI exige que los cambios publicados se realicen en el hilo principal. Cuando un ViewModel actualiza el estado después de un trabajo asíncrono, anótelo con @MainActor para garantizarlo.
@MainActor
final class ProfileViewModel: ObservableObject {
@Published var name: String = ""
func load() async {
name = await fetchName()
}
}Comprobación rápida
Compruebe sus conocimientos sobre vinculaciones.
Resumen
Ha conectado ViewModels con Views mediante vinculaciones de SwiftUI:
- ObservableObject + @Published emiten notificaciones de cambio
- @StateObject crea y es propietario de un ViewModel
- @ObservedObject observa un ViewModel que se le pasa
- @MainActor mantiene las actualizaciones asíncronas en el hilo principal
Con las vinculaciones reactivas configuradas, la View siempre refleja automáticamente el estado más reciente del ViewModel.
Preguntas frecuentes
¿La lección «Vincular modelos de vista con vistas» es gratis?
Sí — el texto completo de «Vincular modelos de vista con vistas» 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 «Vincular modelos de vista con vistas»?
Conecte los modelos de vista con SwiftUI y Combine. 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 2 de 4.
¿Cuánto tiempo toma la lección «Vincular modelos de vista con vistas»?
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.
Todas las lecciones de este curso
- El patrón MVVM
- Vincular modelos de vista con vistas
- El patrón Coordinator
- Probar modelos de vista