如何为SwiftUI设计高效ViewModel以减少视图重绘？

问题背景 #

现有ViewModel代码：

class ViewModel: ObservableObject {
    @Published var brightnessValue: Double = 0.0
    @Published var saturationValue: Double = 0.0
    @Published var contrastValue:   Double = 0.0
}

UI层通过三个SwiftUI滑块绑定到ViewModel的属性，但每次修改任意滑块值时，所有滑块都会重绘——原因是ObservableObject中任意@Published属性变更会触发整个对象的objectWillChange事件，导致所有引用该ViewModel的视图（包括根视图和所有子滑块视图）重新计算body。

对应的视图代码：

struct RootView: View {
    @ObservedObject var viewModel: ViewModel

    var body: some View {
        VStack {
            AdjustmentSlider(name: "brightness", sliderValue: $viewModel.brightnessValue)
            AdjustmentSlider(name: "saturation", sliderValue: $viewModel.saturationValue)
            AdjustmentSlider(name: "contrast",   sliderValue: $viewModel.contrastValue)            
        }
        .background(.random)
    }
}

struct AdjustmentSlider: View {
    let name: String
    @Binding var sliderValue: Double

    var body: some View {
        Slider(value: $sliderValue)
            .background(.randomColor) // 用于可视化重绘情况
    }
}

针对包含数十个滑块的复杂应用，需要优化ViewModel以减少不必要重绘，并判断iOS 16下该问题是否需要关注。

优化ViewModel的方案 #

1. 拆分独立的ObservableObject #

将每个调整项的属性拆分为单独的ObservableObject，让每个滑块仅观察自己对应的ViewModel实例。这样单个属性的变更只会触发对应滑块的重绘，不会影响其他滑块。

示例代码：

// 每个调整项对应独立的ViewModel
class BrightnessVM: ObservableObject {
    @Published var value: Double = 0.0
}

class SaturationVM: ObservableObject {
    @Published var value: Double = 0.0
}

class ContrastVM: ObservableObject {
    @Published var value: Double = 0.0
}

// 根视图使用多个独立的ObservedObject
struct RootView: View {
    @ObservedObject var brightnessVM: BrightnessVM
    @ObservedObject var saturationVM: SaturationVM
    @ObservedObject var contrastVM: ContrastVM

    var body: some View {
        VStack {
            AdjustmentSlider(name: "brightness", sliderValue: $brightnessVM.value)
            AdjustmentSlider(name: "saturation", sliderValue: $saturationVM.value)
            AdjustmentSlider(name: "contrast", sliderValue: $contrastVM.value)            
        }
        .background(.random)
    }
}

这种方案逻辑清晰，实现简单，是iOS 16下最推荐的方式。

2. 手动控制发布范围（Combine） #

通过Combine的PassthroughSubject为每个属性单独创建发布流，让子视图仅订阅自己需要的数据流，避免单个属性变更触发整个ViewModel的更新。

示例代码：

class ViewModel: ObservableObject {
    private let brightnessSubject = PassthroughSubject<Double, Never>()
    private let saturationSubject = PassthroughSubject<Double, Never>()
    private let contrastSubject = PassthroughSubject<Double, Never>()

    // 手动管理属性变更的发布
    var brightnessValue: Double = 0.0 {
        didSet { brightnessSubject.send(brightnessValue) }
    }
    var saturationValue: Double = 0.0 {
        didSet { saturationSubject.send(saturationValue) }
    }
    var contrastValue: Double = 0.0 {
        didSet { contrastSubject.send(contrastValue) }
    }

    // 对外暴露订阅接口
    var brightnessPublisher: AnyPublisher<Double, Never> {
        brightnessSubject.eraseToAnyPublisher()
    }
    var saturationPublisher: AnyPublisher<Double, Never> {
        saturationSubject.eraseToAnyPublisher()
    }
    var contrastPublisher: AnyPublisher<Double, Never> {
        contrastSubject.eraseToAnyPublisher()
    }
}

// 子视图通过订阅指定Publisher更新本地状态
struct AdjustmentSlider: View {
    let name: String
    let valuePublisher: AnyPublisher<Double, Never>
    let onValueChange: (Double) -> Void
    @State private var localValue: Double = 0.0

    var body: some View {
        Slider(value: $localValue, onEditingChanged: { _ in
            onValueChange(localValue)
        })
        .background(.randomColor)
        .onReceive(valuePublisher) { newValue in
            localValue = newValue
        }
    }
}

// 根视图传递对应Publisher和回调
struct RootView: View {
    @ObservedObject var viewModel: ViewModel

    var body: some View {
        VStack {
            AdjustmentSlider(
                name: "brightness",
                valuePublisher: viewModel.brightnessPublisher,
                onValueChange: { viewModel.brightnessValue = $0 }
            )
            AdjustmentSlider(
                name: "saturation",
                valuePublisher: viewModel.saturationPublisher,
                onValueChange: { viewModel.saturationValue = $0 }
            )
            AdjustmentSlider(
                name: "contrast",
                valuePublisher: viewModel.contrastPublisher,
                onValueChange: { viewModel.contrastValue = $0 }
            )
        }
        .background(.random)
    }
}

该方案适合需要精细控制数据流的复杂场景，但实现相对繁琐。

iOS 16下的性能问题判断 #

• 对于少量滑块（如3-5个）：完全无需关注。SwiftUI的视图重绘机制是高效的，仅当视图的body计算存在复杂逻辑（如大量自定义绘制、嵌套复杂视图）时，才会产生可感知的性能影响。你测试中看到的background颜色变化只是body重新计算的表象，SwiftUI实际只会渲染真正变化的部分。
• 对于数十个滑块的复杂应用：如果每个滑块视图的body包含复杂逻辑（如自定义样式、附加的计算型视图），这种不必要的批量重绘可能会累积成性能瓶颈，此时上述优化方案是合理且必要的。

内容的提问来源于stack exchange，提问作者Paulo Mattos