Vue Academy · บทเรียน

Watcher และรีแอกทีฟเชิงลึก

ตอบสนองต่อการเปลี่ยนแปลงข้อมูลด้วย watcher และการเฝ้าดูเชิงลึก

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

watcher คืออะไร

ตัวเฝ้าดูจะเรียกใช้ฟังก์ชันเพื่อตอบสนองต่อการเปลี่ยนแปลงของข้อมูล

ต่างจากค่าที่คำนวณได้ เพราะใช้สำหรับผลข้างเคียง
ดึงข้อมูล บันทึกประวัติ และบันทึกลงที่จัดเก็บ
ตอบสนองเมื่อสิ่งที่ระบุไว้เกิดการเปลี่ยนแปลง

ฟังก์ชันเฝ้าดู

ฟังก์ชันเฝ้าดูรับแหล่งข้อมูลที่ต้องการเฝ้าดูและฟังก์ชันเรียกกลับ ซึ่งได้รับค่าใหม่และค่าเดิม

import { ref, watch } from "vue"

const query = ref("")

watch(query, (newVal, oldVal) => {
  console.log("changed from", oldVal, "to", newVal)
})

ตัวอย่างการใช้งานจริง

เฝ้าดูช่องค้นหาเพื่อเรียก API เมื่อค่าของช่องเปลี่ยนแปลง

const search = ref("")

watch(search, async (newQuery) => {
  const results = await fetchResults(newQuery)
  items.value = results
})

ตัวเลือกทำงานทันที

โดยค่าเริ่มต้น ตัวเฝ้าดูจะทำงานเฉพาะเมื่อมีการเปลี่ยนแปลง ตัวเลือกทำงานทันทีจะทำให้ฟังก์ชันทำงานหนึ่งครั้งทันทีด้วย

watch(userId, (id) => {
  loadUser(id)
}, { immediate: true })

// Runs immediately with the current value,
// then again on every change

ตัวเลือกติดตามเชิงลึก

โดยค่าเริ่มต้น การเฝ้าดูออบเจ็กต์จะทำงานเฉพาะเมื่อการอ้างอิงเปลี่ยนแปลง ตัวเลือกติดตามเชิงลึกจะเฝ้าดูคุณสมบัติที่ซ้อนอยู่ด้วย

const profile = reactive({ name: "Ada", address: { city: "London" } })

watch(profile, (val) => {
  console.log("profile changed")
}, { deep: true })

// Fires even when profile.address.city changes

การเฝ้าดูออบเจ็กต์ที่ซ้อนกัน

หากไม่ติดตามเชิงลึก การเปลี่ยนคุณสมบัติที่ซ้อนอยู่ของออบเจ็กต์แบบตอบสนองที่กำลังเฝ้าดู อาจไม่เรียกฟังก์ชันเรียกกลับตามที่คาดไว้ การติดตามเชิงลึกช่วยให้แน่ใจว่าจะเรียกฟังก์ชันดังกล่าว แต่ต้องแลกกับการทำงานที่เพิ่มขึ้น

ใช้การติดตามเชิงลึกเฉพาะเมื่อจำเป็นต้องติดตามข้อมูลที่ซ้อนกันจริง ๆ
การเฝ้าดูออบเจ็กต์ขนาดใหญ่อย่างละเอียดอาจใช้ทรัพยากรมาก

การเฝ้าดูค่าจากฟังก์ชันอ่านค่า

หากต้องการเฝ้าดูค่าที่ซ้อนอยู่โดยเฉพาะ ให้ส่งฟังก์ชันอ่านค่าเป็นแหล่งข้อมูล

watch(
  () => profile.address.city,
  (newCity) => {
    console.log("city is now", newCity)
  }
)

การเฝ้าดูหลายแหล่งข้อมูล

ส่งอาร์เรย์ของแหล่งข้อมูลเพื่อเฝ้าดูหลายค่าพร้อมกัน

watch([width, height], ([newW, newH], [oldW, oldH]) => {
  console.log("size:", newW, "x", newH)
})

watchEffect

watchEffectจะทำงานทันทีและทำงานซ้ำทุกครั้งที่ค่าตอบสนองใด ๆ ที่ฟังก์ชันอ่านมีการเปลี่ยนแปลง โดยไม่จำเป็นต้องระบุรายการแหล่งข้อมูลอย่างชัดเจน

import { watchEffect } from "vue"

watchEffect(() => {
  console.log("count is", count.value)
})

// Runs now, and again whenever count changes

การเฝ้าดูกับ watchEffect

หลักในการเลือกใช้มีดังนี้

การเฝ้าดูระบุแหล่งข้อมูลอย่างชัดเจน ได้รับค่าเดิมและค่าใหม่ และไม่ทำงานทันทีโดยค่าเริ่มต้น
watchEffectติดตามข้อมูลที่ต้องพึ่งพาโดยอัตโนมัติ ทำงานทันที และไม่มีค่าเดิม

ใช้การเฝ้าดูเมื่อจำเป็นต้องใช้ค่าก่อนหน้า หรือต้องการควบคุมอย่างละเอียด ส่วน watchEffect เหมาะสำหรับความสะดวกในการใช้งาน

ตัวเฝ้าดูใน API แบบ Options

API แบบ Options จะประกาศตัวเฝ้าดูไว้ในบล็อกการเฝ้าดู โดยใช้ชื่อข้อมูลเป็นกุญแจ

export default {
  data() {
    return { question: "" }
  },
  watch: {
    question(newVal, oldVal) {
      this.getAnswer(newVal)
    }
  }
}

ตรวจสอบความเข้าใจ

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

ทบทวน: ตัวเฝ้าดูและการตอบสนองเชิงลึก

คุณได้เรียนรู้วิธีตอบสนองต่อการเปลี่ยนแปลงด้วยผลข้างเคียงดังนี้

การเฝ้าดูสังเกตแหล่งข้อมูลและให้ค่าใหม่กับค่าเดิม
ทำงานทันทีทำให้ฟังก์ชันทำงานหนึ่งครั้งตั้งแต่เริ่มต้น
ติดตามเชิงลึกติดตามการเปลี่ยนแปลงของออบเจ็กต์ที่ซ้อนกัน
watchEffectติดตามข้อมูลที่ต้องพึ่งพาโดยอัตโนมัติและทำงานทันที
เฝ้าดูหลายแหล่งข้อมูลด้วยอาร์เรย์

ถัดไป: การกำหนดเส้นทางด้วย Vue Router

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

บทเรียน “Watcher และรีแอกทีฟเชิงลึก” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Watcher และรีแอกทีฟเชิงลึก”

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

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

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

บทเรียน “Watcher และรีแอกทีฟเชิงลึก” ใช้เวลานานแค่ไหน

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

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

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

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

พื้นฐานรีแอกทีฟ
คุณสมบัติแบบคำนวณ
Watcher และรีแอกทีฟเชิงลึก

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