Swift 5.9 新 @Observable 对象在 SwiftUI 使用中的陷阱与解决

概览

在 Swift 5.9 中，苹果为我们带来了全新的可观察框架 Observation，它是观察者开发模式在 Swift 中的一个全新实现。

除了自身本领过硬以外，Observation 框架和 SwiftUI 搭配起来也能相得益彰，事倍功半。不过 Observable 对象在 SwiftUI 中干起活来可得特别注意，稍不留神结果就会出乎秃头码农们的意料之外。

闲言少叙，让我们马上开始 Observable 的探险之旅吧！Let‘s go！！！😉

---

1. 什么是 Observable 对象？

Observable 对象（不同于之前的 ObservedObject 对象）是 Swift 5.9 新 Observation 框架中推出的一种原生可观察对象。

Observation 框架在 Swift 中提供了观察者设计模式的一个健壮、类型安全和高性能的实现。该模式允许可观察对象维护观察者列表，并通知它们特定属性的改变。这样做的优点是可以实现对象的低耦合，并允许在潜在多个观察者之间隐式分布更新。

创建 Observable 对象很简单，我们只需用 @Observable 宏修饰对应类的定义，该类的实例即为 Observable 对象：

@Observable
class Foo {
    var name: String
    var age: Int
    var power: Double
    
    init(name: String, age: Int, power: Double) {
        self.name = name
        self.age = age
        self.power = power
    }
}

// 创建 Observable 对象 foo
let foo = Foo(name: "hopy", age: 11, power: 5)

2. SwiftUI 中对于 Observable 对象承载的两种方式

在 SwiftUI 中，我们可以同样用 @State 属性包装器来对 Observable 对象声明“真相之源”：

@Observable
class Model {
    var value: Int
    
    init(_ value: Int) {
        self.value = value
    }
}

struct ContentView: View {
	@State var model = Model(11)
    
    var body: some View {
        NavigationStack {
            VStack {
                Text("value: \(model.value)")
                Button("add 1") {
                    model.value += 1
                }
            }
        }
    }
}

大家可以看到，@Observable 对象的行为和之前的 ObservableObject 对象如出一辙，其内容的更改也会导致界面的刷新：

不过，与之前旧 ObservedObject 对象所不同的是，@Observable 对象在 SwiftUI 中无需显式用属性包裹器（Property Wrapper）修饰也能及时的根据变化刷新视图：

struct ContentView: View {    
    let model = Model(11)
    
    var body: some View {
        NavigationStack {
            VStack {
                Text("value: \(model.value)")
                
                Button("add 1") {
                    model.value += 1
                }
            }
        }
    }
}

在上面的代码中，我们的 model 对象没有任何修饰，只是一个单纯的 let 属性。不过运行可以发现，它的结果和之前一毛一样！

这难道意味着在 SwiftUI 中用 @State 或 let 来定义 @Observable 对象没有任何区别么？

非也非也！

3. “原形毕露？”

我们知道在 SwiftUI 中视图其实都是状态的函数。但状态不仅仅是视图的简单附庸，它们又可以超然于视图之外。

简单来说：当视图 body 被重新“求值”时，非状态值会被重建，但状态不会！因为状态的生成周期被放在一个单独的存储区内，和视图本身是分开的。

struct SubView: View {
    let model = Model(0)
    
    var body: some View {
        RoundedRectangle(cornerRadius: 15.0)
            .fill(.red)
            .frame(width: 150, height: 150)
            .overlay {
                VStack {
                    Text("\(model.value)")
                }
            }.onTapGesture {
                model.value += 1
            }
            .foregroundStyle(.white)
    }
}

struct SubStateView: View {
    @State var model = Model(0)
    
    var body: some View {
        RoundedRectangle(cornerRadius: 15.0)
            .fill(.green)
            .frame(width: 150, height: 150)
            .foregroundStyle(.white)
            .overlay {
                VStack {
                    Text("\(model.value)")
                }
            }.onTapGesture {
                model.value += 1
            }
            .foregroundStyle(.white)
    }
}

struct ContentView: View {
    
   @State var id = Int.random(in: 0...10000)
    
   var body: some View {
        NavigationStack {
            VStack {
                GroupBox("无状态 @Observable 对象") {
                    SubView()
                }
                
                GroupBox("@State @Observable 对象") {
                    SubStateView()
                }
                
                Button("刷新：\(id)") {
                    id = Int.random(in: 0...10000)
                }
            }
            .padding()
            .font(.largeTitle.weight(.black))
            .navigationTitle("@Observable 对象演示")
        }
    }
}

对于上面的代码来说，我们在主视图中创建了两个子视图：SubView 和 SubStateView。其中 @Observable 对象 model 在前者中不以状态承载，而在后者中作为状态承载。

运行结果如上图所示：当用户点击刷新按钮时会引起主视图中 Text 显示内容的改变，从而导致主视图中两个子视图发生重建。可以看到以状态承载的 @Observable 对象保持稳定，而另一个 @Observable 对象被重建了。

4. 溯本回原

从上面我们知道了问题的症结，所以改善起来就很简单了：我们只需要保持 @Observable 对象本身的稳定性即可。

一种办法是在主视图中以状态承载该对象，然后将其传递到子视图中去：

struct SubView: View {
    let model: Model
    
    var body: some View {
        RoundedRectangle(cornerRadius: 15.0)
            .fill(.red)
            .frame(width: 150, height: 150)
            .overlay {
                VStack {
                    Text("\(model.value)")
                }
            }.onTapGesture {
                model.value += 1
            }
            .foregroundStyle(.white)
    }
}

struct ContentView: View {
    @State var model = Model(0)
    @State var id = Int.random(in: 0...10000)
    
   var body: some View {
        NavigationStack {
            VStack {
                SubView(model: model)
                
                Button("刷新：\(id)") {
                    id = Int.random(in: 0...10000)
                }
            }
            .padding()
            .font(.largeTitle.weight(.black))
            .navigationTitle("@Observable 对象演示")
            .toolbar {
                Text("大熊猫侯佩 @ CSDN")
                    .font(.headline.weight(.bold))
                    .foregroundStyle(.gray)
            }
        }
    }
}

在上面的代码中，如果可以保证主视图（ContentView）本身不被重建，那么使用非状态来承载 model 对象也是可以的（但不推荐）：

struct ContentView: View {
    let model = Model(0)
	
	var body: some View {
        NavigationStack {
            VStack {
            	// 由于主视图的强稳定性，所以 SubView 对于 model 的引用也保持强稳定（即使是非状态）
                SubView(model: model)
                
                Button("刷新：\(id)") {
                    id = Int.random(in: 0...10000)
                }
            }
        }
    }
}

当然，如果需要在子视图中也能更改 @Observable 对象本身，我们可以直接使用 @Bindable 来修饰它们。

现在，小伙伴们今后倘若在 SwiftUI 遇到类似的问题，相信也可以迎刃而解啦，棒棒哒！💯

---

更多 Swift 5.9 中新 Observation 框架知识的介绍，请小伙伴们移步如下链接观赏：

• Swift 5.9 与 SwiftUI 5.0 中新 Observation 框架应用之深入浅出

---

总结

在本篇博文中，我们讨论了在 SwiftUI 中融合 Swift 5.9 新 @Observable 对象的几种方式，并比较了它们细微差别下的潜在陷阱，最后提供了非常简单的解决之道。

感谢观赏，再会！😎