Swift Academy · บทเรียน

การผูกโมเดลมุมมองเข้ากับมุมมอง

เชื่อมโมเดลมุมมองด้วย SwiftUI และ Combine

การผูกโมเดลมุมมองเข้ากับมุมมอง เป็นบทเรียน Swift Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Swift Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

การเชื่อมต่อ ViewModel กับมุมมอง

ViewModel จะมีประโยชน์ก็ต่อเมื่อมุมมอง ตอบสนอง ต่อการเปลี่ยนแปลงของมัน ใน SwiftUI การตอบสนองนี้ขับเคลื่อนด้วยตัวห่อพร็อพเพอร์ตีที่อิงกับคอมไบน์ ได้แก่ @Published, @StateObject และ @ObservedObject.

สิ่งเหล่านี้ทำงานร่วมกันเป็นการผูกค่าอัตโนมัติ เมื่อ ViewModel เปลี่ยนแปลง มุมมองจะแสดงผลใหม่.

ObservableObject

หากต้องการให้ SwiftUI สังเกตการเปลี่ยนแปลงได้ ViewModel ต้องสอดคล้องกับ ObservableObject โพรโทคอลนี้มอบตัวเผยแพร่ objectWillChange ให้แก่ ViewModel ซึ่งทำงานก่อนเกิดการเปลี่ยนแปลงใด ๆ.

final class CounterViewModel: ObservableObject {
    @Published var count: Int = 0

    func increment() {
        count += 1
    }
}

พร็อพเพอร์ตี @Published

การกำหนดพร็อพเพอร์ตีด้วย @Published จะส่งการแจ้งเตือนการเปลี่ยนแปลงโดยอัตโนมัติทุกครั้งที่มีการกำหนดค่าใหม่.

พร็อพเพอร์ตี @Published ทุกตัวจะส่งข้อมูลเข้าสู่ตัวเผยแพร่ objectWillChange ของออบเจ็กต์ ทำให้มุมมองรู้ได้อย่างแม่นยำว่าควรรีเฟรชเมื่อใด.

final class SearchViewModel: ObservableObject {
    @Published var query: String = ""
    @Published var results: [String] = []
}

@StateObject

@StateObject บอกให้มุมมอง สร้างและเป็นเจ้าของ ViewModel SwiftUI จะสร้างอินสแตนซ์เพียงครั้งเดียวและทำให้มันคงอยู่ตลอดการแสดงผลใหม่ของมุมมองนั้น.

ใช้ @StateObject ในจุดที่มุมมองสร้าง ViewModel เป็นครั้งแรก.

struct CounterView: View {
    @StateObject private var viewModel = CounterViewModel()

    var body: some View {
        Button("Count: \(viewModel.count)") {
            viewModel.increment()
        }
    }
}

@ObservedObject

@ObservedObject ใช้กับ ViewModel ที่สร้างขึ้น ที่อื่น แล้วส่งเข้ามา มุมมองจะสังเกตการเปลี่ยนแปลงของมัน แต่จะไม่เป็นเจ้าของวงจรชีวิต.

ใช้สิ่งนี้กับมุมมองลูกที่รับ ViewModel มาจากมุมมองแม่.

struct BadgeView: View {
    @ObservedObject var viewModel: CounterViewModel

    var body: some View {
        Text("Total: \(viewModel.count)")
    }
}

StateObject เทียบกับ ObservedObject

ความแตกต่างที่สำคัญคือ ความเป็นเจ้าของ:

@StateObject — มุมมองเป็นเจ้าของ และอยู่รอดระหว่างการแสดงผลใหม่
@ObservedObject — ถูกส่งเข้ามา และมุมมองไม่ได้เป็นเจ้าของ

การใช้ @ObservedObject ในจุดที่ควรใช้ @StateObject อาจทำให้ออบเจ็กต์ถูกสร้างใหม่และสูญเสีย state ทุกครั้งที่มุมมองแม่อัปเดต.

การส่ง ViewModel ลงไปยังมุมมองลูก

สร้าง ViewModel เพียงครั้งเดียวด้วย @StateObject ในมุมมองแม่ จากนั้นส่งต่อให้มุมมองลูกที่กำหนดพร็อพเพอร์ตีเป็น @ObservedObject.

struct ParentView: View {
    @StateObject private var viewModel = CounterViewModel()

    var body: some View {
        VStack {
            BadgeView(viewModel: viewModel)
            Button("Add") { viewModel.increment() }
        }
    }
}

การผูกค่าสองทาง

สำหรับข้อมูลนำเข้า เช่น ช่องข้อความ คุณต้องใช้ การผูกค่าสองทาง SwiftUI จะสร้างการผูกค่าดังกล่าวจากพร็อพเพอร์ตี @Published โดยใช้คำนำหน้า $ กับตัวห่อ.

struct SearchView: View {
    @StateObject private var viewModel = SearchViewModel()

    var body: some View {
        TextField("Search", text: $viewModel.query)
    }
}

การขับเคลื่อน state ของส่วนติดต่อผู้ใช้

มุมมองควรคำนวณทุกสิ่งที่แสดงจากพร็อพเพอร์ตีที่เผยแพร่ ตัวหมุนแสดงการโหลด แถบแจ้งข้อผิดพลาด และเนื้อหาล้วนมาจาก state ของ ViewModel.

final class FeedViewModel: ObservableObject {
    enum State { case loading, loaded([String]), error(String) }
    @Published var state: State = .loading
}

การตอบสนองต่อ state

มุมมองจะตรวจสอบ state ของ ViewModel เพื่อแสดงผลส่วนติดต่อผู้ใช้ที่ถูกต้อง ไม่มีโค้ดเชิงคำสั่งสำหรับแสดงหรือซ่อน มีเพียงการแมปแบบประกาศโครงสร้าง.

struct FeedView: View {
    @StateObject var viewModel = FeedViewModel()
    var body: some View {
        switch viewModel.state {
        case .loading: ProgressView()
        case .loaded(let items): List(items, id: \.self) { Text($0) }
        case .error(let message): Text(message)
        }
    }
}

การรักษาการอัปเดตบนเธรดหลัก

SwiftUI กำหนดให้การเปลี่ยนแปลงของพร็อพเพอร์ตีที่เผยแพร่เกิดขึ้นบน เธรดหลัก เมื่อ ViewModel อัปเดต state หลังการทำงานแบบอะซิงโครนัส ให้กำกับด้วย @MainActor เพื่อรับประกันเรื่องนี้.

@MainActor
final class ProfileViewModel: ObservableObject {
    @Published var name: String = ""

    func load() async {
        name = await fetchName()
    }
}

ตรวจสอบอย่างรวดเร็ว

ทดสอบความเข้าใจเกี่ยวกับการผูกค่า.

สรุป

คุณเชื่อมต่อ ViewModel กับมุมมองด้วยการผูกค่าของ SwiftUI แล้ว:

ObservableObject + @Published ส่งการแจ้งเตือนการเปลี่ยนแปลง
@StateObject สร้างและเป็นเจ้าของ ViewModel
@ObservedObject สังเกต ViewModel ที่ถูกส่งเข้ามา
@MainActor ช่วยให้การอัปเดตแบบอะซิงโครนัสทำงานบนเธรดหลัก

เมื่อมีการผูกค่าแบบตอบสนองแล้ว มุมมองจะแสดง state ล่าสุดของ ViewModel โดยอัตโนมัติเสมอ.

คำถามที่พบบ่อย

บทเรียน “การผูกโมเดลมุมมองเข้ากับมุมมอง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การผูกโมเดลมุมมองเข้ากับมุมมอง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Swift Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Swift Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การผูกโมเดลมุมมองเข้ากับมุมมอง”

เชื่อมโมเดลมุมมองด้วย SwiftUI และ Combine คุณปฏิบัติ Swift Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Swift Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Swift Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “การผูกโมเดลมุมมองเข้ากับมุมมอง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Swift Academy นี้ได้ไหม

ได้ บทเรียน Swift Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

รูปแบบ MVVM
การผูกโมเดลมุมมองเข้ากับมุมมอง
รูปแบบ Coordinator
การทดสอบโมเดลมุมมอง

← กลับไปที่ Swift Academy