Quản lý state là nền tảng của mọi ứng dụng SwiftUI có hiệu năng cao. Kể từ iOS 17, macro @Observable đã cách mạng hóa cách tạo các model phản ứng, trong khi @State vẫn không thể thiếu cho state cục bộ của view. Hiểu rõ khi nào sử dụng từng công cụ giúp tránh các lần render lại không cần thiết và xây dựng những ứng dụng mượt mà, đáp ứng tốt.

Bài viết này đề cập đến

Bài viết khám phá cơ chế nội bộ của @Observable và @State, sự khác biệt cơ bản của chúng, đồng thời cung cấp hướng dẫn rõ ràng để chọn công cụ phù hợp theo ngữ cảnh.

Cơ bản về @State

@State là dạng quản lý state đơn giản nhất trong SwiftUI. Property wrapper này tạo bộ nhớ bền vững cho một giá trị thuộc riêng view khai báo nó.

CounterView.swiftswift

struct CounterView: View {
    // @State creates storage managed by SwiftUI
    @State private var count = 0

    var body: some View {
        VStack(spacing: 20) {
            // The view updates when count changes
            Text("Counter: \(count)")
                .font(.largeTitle)

            HStack(spacing: 16) {
                Button("- 1") {
                    count -= 1
                }

                Button("+ 1") {
                    count += 1
                }
            }
            .buttonStyle(.borderedProminent)
        }
    }
}

Mỗi lần thay đổi count sẽ kích hoạt việc render lại view. SwiftUI tự động quản lý vòng đời của giá trị này, giữ nguyên qua các lần xây dựng lại body.

Đặc điểm chính của @State

@State sở hữu một số đặc tính nổi bật xác định việc sử dụng tối ưu:

StateCharacteristics.swiftswift

struct FormView: View {
    // ✅ Simple local state - value types
    @State private var username = ""
    @State private var isEnabled = true
    @State private var selectedIndex = 0

    // ✅ Complex value types supported
    @State private var configuration = FormConfiguration()

    var body: some View {
        Form {
            TextField("Username", text: $username)

            Toggle("Enabled", isOn: $isEnabled)

            Picker("Option", selection: $selectedIndex) {
                Text("Option A").tag(0)
                Text("Option B").tag(1)
                Text("Option C").tag(2)
            }
        }
    }
}

// Structs work perfectly with @State
struct FormConfiguration: Equatable {
    var theme: Theme = .light
    var fontSize: CGFloat = 16
    var showNotifications: Bool = true
}

enum Theme {
    case light, dark, system
}

Điểm quan trọng: @State hoạt động với các kiểu giá trị (struct, enum, kiểu nguyên thủy). Đối với kiểu tham chiếu (class), cần các công cụ khác.

Macro @Observable được giải thích

Được giới thiệu cùng iOS 17, @Observable biến bất kỳ class nào thành một nguồn dữ liệu phản ứng. Khác với protocol ObservableObject cũ, macro này cung cấp quan sát chi tiết: chỉ những thuộc tính thực sự được view đọc mới kích hoạt việc render lại.

UserModel.swiftswift

import Observation

// @Observable transforms the class into a reactive source
@Observable
class UserModel {
    var name: String = ""
    var email: String = ""
    var avatarURL: URL?
    var preferences = UserPreferences()

    // Computed properties work too
    var isValid: Bool {
        !name.isEmpty && email.contains("@")
    }
}

struct UserPreferences {
    var newsletter: Bool = false
    var notifications: Bool = true
    var theme: Theme = .system
}

Điều kỳ diệu xảy ra tại thời điểm biên dịch: macro tự động tạo mã theo dõi cần thiết cho từng thuộc tính.

Quan sát chi tiết trong thực tế

Khác biệt lớn so với ObservableObject cũ nằm ở mức độ chi tiết của việc theo dõi:

GranularObservation.swiftswift

@Observable
class ProfileModel {
    var name: String = ""
    var bio: String = ""
    var followerCount: Int = 0
    var posts: [Post] = []
}

struct ProfileHeaderView: View {
    let model: ProfileModel

    var body: some View {
        VStack {
            // This view only re-renders if name or bio change
            Text(model.name)
                .font(.title)
            Text(model.bio)
                .foregroundStyle(.secondary)
        }
    }
}

struct FollowerCountView: View {
    let model: ProfileModel

    var body: some View {
        // This view only re-renders if followerCount changes
        HStack {
            Image(systemName: "person.2")
            Text("\(model.followerCount) followers")
        }
    }
}

struct ProfileScreen: View {
    @State private var model = ProfileModel()

    var body: some View {
        VStack {
            // Each subview tracks only its dependencies
            ProfileHeaderView(model: model)
            FollowerCountView(model: model)

            Button("Simulate new follower") {
                // Only re-renders FollowerCountView
                model.followerCount += 1
            }
        }
    }
}

Theo dõi tự động

SwiftUI phân tích body của mỗi view để xác định những thuộc tính nào được đọc. Chỉ những thuộc tính đó mới kích hoạt việc render lại khi bị thay đổi.

So sánh trực tiếp: @Observable vs @State

Việc lựa chọn giữa hai công cụ này phụ thuộc vào nhiều yếu tố. Đây là bảng so sánh có cấu trúc:

ComparisonExample.swiftswift

// Scenario 1: Temporary UI state → @State
struct ToggleExample: View {
    @State private var isExpanded = false  // ✅ @State appropriate

    var body: some View {
        VStack {
            Button(isExpanded ? "Collapse" : "Expand") {
                withAnimation {
                    isExpanded.toggle()
                }
            }

            if isExpanded {
                Text("Detailed content...")
            }
        }
    }
}

// Scenario 2: Shared business data → @Observable
@Observable
class CartModel {  // ✅ @Observable appropriate
    var items: [CartItem] = []
    var promoCode: String?

    var total: Decimal {
        items.reduce(0) { $0 + $1.price * Decimal($1.quantity) }
    }

    var itemCount: Int {
        items.reduce(0) { $0 + $1.quantity }
    }

    func addItem(_ item: CartItem) {
        if let index = items.firstIndex(where: { $0.id == item.id }) {
            items[index].quantity += 1
        } else {
            items.append(item)
        }
    }

    func removeItem(_ item: CartItem) {
        items.removeAll { $0.id == item.id }
    }
}

struct CartItem: Identifiable, Equatable {
    let id: UUID
    let name: String
    let price: Decimal
    var quantity: Int
}

Bảng tổng hợp các trường hợp sử dụng

| Tiêu chí | @State | @Observable | |----------|--------|-------------| | Loại dữ liệu | Kiểu giá trị (struct, enum) | Class | | Phạm vi | Cục bộ trong một view | Có thể chia sẻ giữa các view | | Độ phức tạp | State đơn giản | Logic nghiệp vụ phức tạp | | Vòng đời | Được SwiftUI quản lý | Quản lý rõ ràng | | Render lại | Toàn bộ view | Chi tiết theo từng thuộc tính |

Sẵn sàng chinh phục phỏng vấn iOS?

Luyện tập với mô phỏng tương tác, flashcards và bài kiểm tra kỹ thuật.

Khám phá iOS

Mẫu sử dụng nâng cao

Kết hợp @State và @Observable

Trong các ứng dụng thực tế, hai công cụ này tồn tại hài hòa cùng nhau. @State xử lý state UI cục bộ trong khi @Observable đóng gói dữ liệu nghiệp vụ.

CombinedPatterns.swiftswift

@Observable
class TodoListModel {
    var todos: [Todo] = []
    var filter: TodoFilter = .all

    var filteredTodos: [Todo] {
        switch filter {
        case .all:
            return todos
        case .active:
            return todos.filter { !$0.isCompleted }
        case .completed:
            return todos.filter { $0.isCompleted }
        }
    }

    func addTodo(title: String) {
        let todo = Todo(id: UUID(), title: title, isCompleted: false)
        todos.append(todo)
    }

    func toggleTodo(_ todo: Todo) {
        guard let index = todos.firstIndex(where: { $0.id == todo.id }) else { return }
        todos[index].isCompleted.toggle()
    }
}

struct Todo: Identifiable, Equatable {
    let id: UUID
    var title: String
    var isCompleted: Bool
}

enum TodoFilter: CaseIterable {
    case all, active, completed
}

struct TodoListView: View {
    // Business data via @Observable
    @State private var model = TodoListModel()

    // Local UI state via @State
    @State private var newTodoTitle = ""
    @State private var isAddingTodo = false
    @State private var selectedTodo: Todo?

    var body: some View {
        NavigationStack {
            VStack {
                // Filter with Picker
                Picker("Filter", selection: $model.filter) {
                    ForEach(TodoFilter.allCases, id: \.self) { filter in
                        Text(filter.label).tag(filter)
                    }
                }
                .pickerStyle(.segmented)
                .padding()

                // Todo list
                List(model.filteredTodos, selection: $selectedTodo) { todo in
                    TodoRowView(todo: todo) {
                        model.toggleTodo(todo)
                    }
                }
            }
            .navigationTitle("Tasks")
            .toolbar {
                Button {
                    isAddingTodo = true
                } label: {
                    Image(systemName: "plus")
                }
            }
            .sheet(isPresented: $isAddingTodo) {
                AddTodoSheet(model: model)
            }
        }
    }
}

struct TodoRowView: View {
    let todo: Todo
    let onToggle: () -> Void

    var body: some View {
        HStack {
            Image(systemName: todo.isCompleted ? "checkmark.circle.fill" : "circle")
                .foregroundStyle(todo.isCompleted ? .green : .secondary)
                .onTapGesture(perform: onToggle)

            Text(todo.title)
                .strikethrough(todo.isCompleted)
        }
    }
}

extension TodoFilter {
    var label: String {
        switch self {
        case .all: return "All"
        case .active: return "Active"
        case .completed: return "Completed"
        }
    }
}

@Observable với dependency injection

Đối với các ứng dụng phức tạp hơn, việc tiêm phụ thuộc qua environment của SwiftUI cho phép tách biệt hiệu quả:

DependencyInjection.swiftswift

@Observable
class AuthenticationService {
    var currentUser: User?
    var isAuthenticated: Bool { currentUser != nil }

    func login(email: String, password: String) async throws {
        // Authentication logic
        currentUser = User(id: UUID(), email: email, name: "User")
    }

    func logout() {
        currentUser = nil
    }
}

struct User: Identifiable, Equatable {
    let id: UUID
    let email: String
    let name: String
}

// Extension to create an environment key
extension EnvironmentValues {
    @Entry var authService: AuthenticationService = AuthenticationService()
}

// Configuration in the App
@main
struct MyApp: App {
    @State private var authService = AuthenticationService()

    var body: some Scene {
        WindowGroup {
            ContentView()
                .environment(\.authService, authService)
        }
    }
}

// Usage in views
struct ProfileView: View {
    @Environment(\.authService) private var authService

    var body: some View {
        if let user = authService.currentUser {
            VStack {
                Text("Hello, \(user.name)")
                Button("Sign Out") {
                    authService.logout()
                }
            }
        } else {
            Text("Not signed in")
        }
    }
}

Hiệu năng và tối ưu hóa

Tránh render lại không cần thiết

Ngay cả với mức chi tiết của @Observable, một số mẫu vẫn có thể làm giảm hiệu năng:

PerformanceOptimization.swiftswift

// ❌ Bad pattern: reading the entire object
struct BadPatternView: View {
    let model: ProfileModel

    var body: some View {
        // Reads model.name AND model.posts even if only name is displayed
        let _ = model.posts.count  // Creates unnecessary dependency
        Text(model.name)
    }
}

// ✅ Good pattern: targeted reading
struct GoodPatternView: View {
    let model: ProfileModel

    var body: some View {
        // Tracks only name
        Text(model.name)
    }
}

// ✅ Extract into subviews to isolate dependencies
struct OptimizedProfileView: View {
    let model: ProfileModel

    var body: some View {
        VStack {
            // Each subview has its own dependencies
            ProfileNameView(model: model)
            ProfilePostsView(model: model)
            ProfileStatsView(model: model)
        }
    }
}

struct ProfileNameView: View {
    let model: ProfileModel

    var body: some View {
        Text(model.name)
            .font(.title)
    }
}

struct ProfilePostsView: View {
    let model: ProfileModel

    var body: some View {
        ForEach(model.posts) { post in
            PostRow(post: post)
        }
    }
}

struct ProfileStatsView: View {
    let model: ProfileModel

    var body: some View {
        HStack {
            StatBadge(value: model.followerCount, label: "Followers")
            StatBadge(value: model.posts.count, label: "Posts")
        }
    }
}

Computed property tốn kém

Các computed property trên @Observable được đánh giá lại mỗi lần truy cập. Đối với các tính toán phức tạp, nên cache kết quả vào stored property.

Cập nhật theo lô với withObservationTracking

Với các kịch bản nâng cao, withObservationTracking cho phép phát hiện thay đổi mà không cần tạo binding:

ObservationTracking.swiftswift

import Observation

@Observable
class DataSyncModel {
    var lastSyncDate: Date?
    var pendingChanges: Int = 0
    var isSyncing: Bool = false
}

class SyncCoordinator {
    let model: DataSyncModel

    init(model: DataSyncModel) {
        self.model = model
        startObserving()
    }

    private func startObserving() {
        // Observe changes without UI
        withObservationTracking {
            // Access that creates dependencies
            _ = model.pendingChanges
            _ = model.isSyncing
        } onChange: {
            // Called when an observed property changes
            Task { @MainActor in
                self.handleModelChange()
            }
        }
    }

    private func handleModelChange() {
        if model.pendingChanges > 0 && !model.isSyncing {
            // Trigger synchronization
            Task {
                await syncChanges()
            }
        }
        // Re-establish observation
        startObserving()
    }

    private func syncChanges() async {
        model.isSyncing = true
        // Sync logic...
        model.isSyncing = false
        model.pendingChanges = 0
        model.lastSyncDate = Date()
    }
}

Chuyển từ ObservableObject

Đối với các dự án hiện tại đang dùng ObservableObject, việc chuyển sang @Observable đơn giản hóa mã:

MigrationExample.swiftswift

// ❌ Old pattern with ObservableObject
class OldSettingsModel: ObservableObject {
    @Published var darkMode: Bool = false
    @Published var fontSize: CGFloat = 16
    @Published var notifications: Bool = true
}

struct OldSettingsView: View {
    @StateObject private var settings = OldSettingsModel()
    // or @ObservedObject if injected

    var body: some View {
        Form {
            Toggle("Dark Mode", isOn: $settings.darkMode)
            Slider(value: $settings.fontSize, in: 12...24)
            Toggle("Notifications", isOn: $settings.notifications)
        }
    }
}

// ✅ New pattern with @Observable
@Observable
class NewSettingsModel {
    var darkMode: Bool = false
    var fontSize: CGFloat = 16
    var notifications: Bool = true
}

struct NewSettingsView: View {
    @State private var settings = NewSettingsModel()

    var body: some View {
        Form {
            Toggle("Dark Mode", isOn: $settings.darkMode)
            Slider(value: $settings.fontSize, in: 12...24)
            Toggle("Notifications", isOn: $settings.notifications)
        }
    }
}

Lợi ích của việc chuyển đổi:

Không cần @Published trên từng thuộc tính nữa
@State thay thế @StateObject khi tạo
Quan sát chi tiết tự động
Mã dễ đọc và dễ bảo trì hơn

Quy tắc thực tế khi ra quyết định

Hướng dẫn ra quyết định để chọn công cụ phù hợp:

DecisionGuide.swiftswift

/*
 RULE 1: Ephemeral UI state → @State
 - Animations, transitions
 - Local form states
 - Temporary selections
 - Section expand/collapse
*/
struct AnimatedCard: View {
    @State private var isFlipped = false  // ✅ Local UI state
    // ...
}

/*
 RULE 2: Shared data across views → @Observable
 - Business data models
 - Authentication state
 - Shopping cart
 - User preferences
*/
@Observable
class UserSession {  // ✅ Shared across app
    var user: User?
    var preferences: Preferences
    // ...
}

/*
 RULE 3: Simple struct with binding → @State
 - Local configuration
 - Isolated forms
*/
struct FormData {
    var name: String = ""
    var email: String = ""
}

struct FormView: View {
    @State private var formData = FormData()  // ✅ Struct with @State
    // ...
}

/*
 RULE 4: Complex business logic → @Observable
 - Validations
 - Network calls
 - Data transformations
*/
@Observable
class OrderProcessor {  // ✅ Complex logic
    var items: [OrderItem] = []
    var status: OrderStatus = .draft

    func validate() -> [ValidationError] { /* ... */ }
    func submit() async throws { /* ... */ }
}

Kết luận

Việc lựa chọn giữa @Observable và @State quy về hai câu hỏi cơ bản: loại dữ liệu (giá trị hay tham chiếu) và phạm vi state (cục bộ hay chia sẻ). @State xuất sắc cho state UI đơn giản và cục bộ, trong khi @Observable tỏa sáng với các model dữ liệu phức tạp đòi hỏi quan sát chi tiết.

Danh sách kiểm tra ra quyết định

✅ Dùng @State cho kiểu giá trị và state UI tạm thời
✅ Dùng @Observable cho class chứa dữ liệu nghiệp vụ
✅ Ưu tiên @Observable khi state trải dài qua nhiều view
✅ Tách thành subview để tối ưu render lại
✅ Tránh đọc các thuộc tính không cần thiết trong body
✅ Chuyển dần từ ObservableObject
✅ Sử dụng environment cho dependency injection
✅ Kiểm tra hiệu năng với Instruments cho các trường hợp phức tạp

Bắt đầu luyện tập!

Kiểm tra kiến thức với mô phỏng phỏng vấn và bài kiểm tra kỹ thuật.

Tạo tài khoản miễn phí

SwiftUI @Observable vs @State: Khi Nào Dùng Cái Nào Năm 2026