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

在这里插入图片描述

概览

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

在这里插入图片描述

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

在本篇博文中，您将学到如下内容：

概览
1. 什么是 Observable 对象？
2. SwiftUI 中对于 Observable 对象承载的两种方式
3. “原形毕露？”
4. 溯本回原
总结

闲言少叙，让我们马上开始 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)
                }
            }
        }
    }
}