SwiftUI大型计算属性致视图异常，如何优化大数据集处理？

核心问题分析 #

当前用计算属性合并两个@Published数组时，只要任一数组有元素变化，就会触发全量合并+排序操作。当元素达到50+时，重复的高开销计算会导致SwiftUI视图频繁重绘，进而引发导航或渲染异常。

优化方案（保留双ViewModel数组） #

1. 引入中间ViewModel统一管理合并逻辑 #

创建一个CombinedMessagesViewModel作为中间层，监听两个子ViewModel的数组变化，通过防抖和批量处理减少不必要的计算：

class CombinedMessagesViewModel: ObservableObject {
    @Published var sortedMessages: [MyWrapper] = []
    
    private var cancellables = Set<AnyCancellable>()
    
    init(vm1: ViewModelOne, vm2: ViewModelTwo) {
        // 合并两个子ViewModel的发布流
        Publishers.CombineLatest(vm1.$struct1Array, vm2.$struct2Array)
            .debounce(for: .milliseconds(50), scheduler: DispatchQueue.main) // 防抖避免频繁计算
            .map { struct1s, struct2s in
                // 转换为Wrapper类型并合并排序
                let wrapped1 = struct1s.map(MyWrapper.struct1)
                let wrapped2 = struct2s.map(MyWrapper.struct2)
                return (wrapped1 + wrapped2).sorted { $0.date < $1.date }
            }
            .assign(to: \.sortedMessages, on: self)
            .store(in: &cancellables)
    }
}

2. 视图层用懒加载容器优化渲染 #

在父视图中初始化中间ViewModel，传入两个子ViewModel，并用LazyVStack替代普通VStack，只渲染可见区域元素：

struct MessagesView: View {
    @EnvironmentObject var vm1: ViewModelOne
    @EnvironmentObject var vm2: ViewModelTwo
    @StateObject private var combinedVM: CombinedMessagesViewModel
    
    init() {
        _combinedVM = StateObject(wrappedValue: CombinedMessagesViewModel(vm1: vm1, vm2: vm2))
    }
    
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(combinedVM.sortedMessages, id: \.id) { message in
                    switch message {
                    case .struct1(let item):
                        Struct1View(item: item).equatable()
                    case .struct2(let item):
                        Struct2View(item: item).equatable()
                    }
                }
            }
        }
    }
}

3. 进阶增量更新优化（可选） #

如果消息以追加为主（新消息在尾部），可以实现增量合并逻辑，避免全量排序：

// 需给MyWrapper实现Equatable协议
private func mergeIncrementally(old: [MyWrapper], new1: [Struct1], new2: [Struct2]) -> [MyWrapper] {
    var result = old
    let newWrapped1 = new1.map(MyWrapper.struct1).filter { !result.contains($0) }
    let newWrapped2 = new2.map(MyWrapper.struct2).filter { !result.contains($0) }
    let newItems = (newWrapped1 + newWrapped2).sorted { $0.date < $1.date }
    
    // 插入到已排序数组的对应位置
    for item in newItems {
        if let index = result.firstIndex(where: { $0.date > item.date }) {
            result.insert(item, at: index)
        } else {
            result.append(item)
        }
    }
    return result
}

4. 额外性能保障 #

• 给Struct1、Struct2、MyWrapper实现稳定的唯一id（如UUID或服务器返回的标识），避免ForEach因id不稳定重建视图。
• 给消息视图添加.equatable()修饰符，仅当数据真正变化时才重绘。

内容的提问来源于stack exchange，提问作者Ahmed Zaidan