在 SwiftUI 视图中结合 onChange 和 onAppear 事件？

Question

I'm observe a property on a view using the onChange modifier. However, I'd also like the same piece of code to run on the initial value as well because sometimes the data is injected in the initializer or asynchronously loaded later.

For example, I have a view that gets a model injected. Sometimes this model has data in it to begin with (like previews), or is asynchronously retrieved from the network.

class MyModel: ObservableObject {
    @Published var counter = 0
}

struct ContentView: View {
    @ObservedObject var model: MyModel
    
    var body: some View {
        VStack {
            Text("Counter: \(model.counter)")
            Button("Increment") { model.counter += 1 }
        }
        .onChange(of: model.counter, perform: someLogic)
        .onAppear { someLogic(counter: model.counter) }
    }
    
    private func someLogic(counter: Int) {
        print("onAppear: \(counter)")
    }
}

In both onAppear and onChange cases, I'd like to run someLogic(counter:) . Is there a better way to get this behaviour or combine them?

Answer 1

It looks like onReceive may be what you need. Instead of:

.onChange(of: model.counter, perform: someLogic)
.onAppear { someLogic(counter: model.counter) }

you could do:

.onReceive(model.$counter, perform: someLogic)

The difference between onChange and onReceive is that the latter also fires when the view is initialised.

---

onChange

If you take a closer look at onChange , you'll see that it performs an action only when a value changes (and this doesn't happen when a view is initialised).

/// Adds a modifier for this view that fires an action when a specific
/// value changes.
/// ...
@inlinable public func onChange<V>(of value: V, perform action: @escaping (V) -> Void) -> some View where V : Equatable

---

onReceive

However, the counter's publisher will emit the value also when a view is initialised. This will make onReceive perform an action passed as a parameter.

/// Adds an action to perform when this view detects data emitted by the
/// given publisher.
/// ...
@inlinable public func onReceive<P>(_ publisher: P, perform action: @escaping (P.Output) -> Void) -> some View where P : Publisher, P.Failure == Never

---

Just note that onReceive is not an equivalent of onChange + onAppear .

onAppear is called when a view appears but in some cases a view may be initialised again without firing onAppear .

Answer 2

Apple understood this requirement so they gave us task(id:priority:_:) which will run the operation both when the views described by the View data struct appear on screen and if the value supplied to id: changes (it must be an Equatable ). It has the added benefits that the operation is cancelled if the value is changed so the next operation doesn't overlap with the first; it also is cancelled if the View disappears.

Example

...
let number: Int
...
.task(id: number){
    print("task") // called both on appear and when changed. If an await method is called, it is cancelled if the number changes or if the View disappears.
    someState = await fetchSomething(number)
}
.onAppear {
    print("onAppear") // only called during appear.
}
.onChange(of: number) { number in 
    print("onChange") // only called when number is changed.
}

Answer 3

Tell you a real accident.

In a navigation stack, push A -> push B. Now B is the on the screen

onReceive can be received on A too even it's not on the screen, while onChange only can be triggered on B. In this case, onReceive is very dangerous.

For example, if you have a global state and try to push to another view once onReceived or onChange is triggered on both A and B, then you will see the view is pushed twice since both A and B triggers.