🅿️ObservableObject

SwiftUI ⟩ Data Flow ⟩ ObservableObject

When a class conforms to the ObservableObject protocol, any changes to its published values will cause all views using those values to automatically update, reflecting the changes.

// ⭐️ 1. declare an observable object type
final class ModelData: ObservableObject {   
 
    // ⭐️ 2. declare published properties
    @Published var landmarks: [Landmark] = load("landmarkData.json")               
}

// app
struct LandmarksApp: App {
    
    // ⭐️ 3. initialize an observable object (data model)
    @StateObject private var modelData = ModelData() 
    
    var body: some Scene {
        WindowGroup {
            ContentView()
                // ⭐️ 4. put the model object in the environment.
                // ------------------------------------------------
                //       any subview can access this model object 
                //       through `@EnvironmentObject` automatically. (see 6.)
                .environmentObject(modelData)         
        }
    }
}

// any subview in the view hierarchy
struct LandmarkList: View {

    // ⭐️ 5. adopt the model object as an `@EnvironmentObject`
    // --------------------------------------------------------
    // `modelData` property gets its value AUTOMATICALLY, as long as
    // `environmentObject(_:)` modifier has been applied to a parent view.
    @EnvironmentObject var modelData: ModelData      
    
    var body: some View { ... }
}

• An observable object is a custom object (reference type) for your data that can be bound to a view from storage in SwiftUI’s environment.

👥 相關

• Use ObservableObject to declare an observable object type.
• Use @Published to declare published values in an observable object type.
• Use @StateObject to initialize an observable object.
• observer： any view or object that uses the observable object's data.
• data model：data shared with any views in your app.
• environment object：an observable object, which is put in the environment by calling an ancester view's .environmentObject(_:) modifier.

📘 手冊

• Combine ⟩ ObservableObject (protocol)
• SwiftUI ⟩ Model data ⟩ @ObservedObject (property wrapper)
• SwiftUI Tutorials ⟩ Handling User Input ⟩

  • Sec. 4: Use an Observable Object for Storage
  • Sec. 5: Adopt the Model Object in Your Views
• SwiftUI ⟩ State and Data Flow

  • StateObject
  • EnvironmentObject

📗 參考

• Majid ⟩ The difference between @StateObject, @EnvironmentObject, and @ObservedObject in SwiftUI #todo

💬 討論

• SwiftUI View not updating based on @ObservedObject
• @Published ObservedObjects SwiftUI Updates not Happening

問題

在跟 CS193P 到第三課的時候，如果按照課程上的程式碼原封不動的照抄，程式可以正常執行。

但如果擅自將 Card 這個 struct 改成不僅遵循 Identifiable 同時也遵循 Equatable，這時就出現問題了：「在按卡片的時候，卡片不會翻面」，這問題似乎跟 ForEach(data){ ... } 語法裡面，data 部分的 .id 有關係。

就算 @Published var viewModel 更新了，但在 ForEach(viewModel.cards) 裡面的 cards 的 id 並沒有變更，再加上 Card 本身遵循 Equatable (這點很重要，因為如果沒有 Equatable，程式可正常執行)，造成 SwiftUI 判斷 EmojiMemoryGameView 的 body 裡面的 ForEach 部分不需更新，因此就不會翻面了。

有 Equatable 跟沒有 Equatable 怎麼差那麼多呢？SwiftUI 是如何判斷一個 view 到底要不要更新呢？

參考資料

🍎 官方

• SwiftUI ⟩ View Layout & Presentation ⟩ ForEach
• Swift ⟩ Standard Library ⟩ Basic Behaviors ⟩ Identifiable

📘 參考

• Working with Identifiable items in SwiftUI - Hacking with Swift
• How to create views in a loop using ForEach - Hacking with Swift
• CS193P: Lecture 3, Reactive UI - YouTube