0Pricing
Vue Academy · บทเรียน

Computed และ Watch ใน Composition API

การใช้ computed() สำหรับสถานะที่คำนวณจากค่าอื่น และ watch() กับ watchEffect() สำหรับผลข้างเคียง

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

การหาค่าและตอบสนองต่อ state

state แบบรีแอกทีฟเป็นเพียงครึ่งหนึ่งของเรื่องทั้งหมด คุณยังต้องหาค่าใหม่จาก state และตอบสนองต่อการเปลี่ยนแปลงด้วย API แบบการประกอบมี computed, watch และ watchEffect สำหรับงานนี้

computed สำหรับค่าที่คำนวณมา

computed() รับฟังก์ชันสำหรับอ่านค่าและส่งคืน ref ซึ่งค่าของมันคำนวณมาจาก state แบบรีแอกทีฟอื่น ๆ เข้าถึงค่าด้วย .value ใน JS และค่าจะถูกแกะออกในเทมเพลต

import { ref, computed } from 'vue'

const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4

computed ประเมินเมื่อจำเป็นและเก็บแคช

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

ด้วยเหตุนี้ computed จึงเหมาะอย่างยิ่งสำหรับการคำนวณค่าที่ใช้ทรัพยากรมาก

computed อัปเดตโดยอัตโนมัติ

เปลี่ยนค่าที่เป็นการพึ่งพา แล้ว computed จะอัปเดตในครั้งถัดไปที่มีการอ่านค่า คุณไม่ต้องเรียกใช้ด้วยตนเอง

const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10

watch สำหรับผลข้างเคียง

watch() เฝ้าดูแหล่งข้อมูลแบบรีแอกทีฟและเรียกใช้ฟังก์ชันเรียกกลับเมื่อแหล่งข้อมูลนั้นเปลี่ยนแปลง ฟังก์ชันเรียกกลับจะได้รับค่าใหม่และค่าเดิม

import { ref, watch } from 'vue'

const count = ref(0)
watch(count, (newVal, oldVal) => {
  console.log('changed from', oldVal, 'to', newVal)
})

watch ประเมินเมื่อจำเป็นโดยค่าเริ่มต้น

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

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

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

watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(newCount, newName)
})

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

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

const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
  console.log('count is', newVal)
})

watchEffect: ทำงานทันทีและติดตามอัตโนมัติ

watchEffect() เรียกใช้ฟังก์ชันของมันทันที และเรียกใช้อีกครั้งทุกครั้งที่ค่าแบบรีแอกทีฟใด ๆ ที่ใช้ภายในฟังก์ชันเปลี่ยนแปลง คุณไม่ต้องระบุการพึ่งพา เพราะระบบจะติดตามให้โดยอัตโนมัติ

import { ref, watchEffect } from 'vue'

const count = ref(0)
watchEffect(() => {
  console.log('count is', count.value)
})
// logs immediately, then on every change

watch เปรียบเทียบกับ watchEffect

  • watch: แหล่งข้อมูลที่ระบุชัดเจน ทำงานเมื่อจำเป็น และให้ทั้งค่าเดิมกับค่าใหม่
  • watchEffect: ติดตามการพึ่งพาอัตโนมัติ ทำงานทันที และเข้าถึงค่าเดิมไม่ได้

ใช้ watch เมื่อต้องการค่าเดิมหรือควบคุมอย่างละเอียด ใช้ watchEffect สำหรับผลข้างเคียงแบบรีแอกทีฟที่ต้องการเขียนอย่างรวดเร็ว

computed เทียบกับ watch

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

ตรวจสอบความเข้าใจอย่างรวดเร็ว

เลือกตัวช่วยแบบตอบสนองที่เหมาะสม

ทบทวน

ตอนนี้คุณทราบวิธีสร้างค่าใหม่และตอบสนองต่อการเปลี่ยนแปลงแล้ว:

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

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

บทเรียน “Computed และ Watch ใน Composition API” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “Computed และ Watch ใน Composition API”

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

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

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

บทเรียน “Computed และ Watch ใน Composition API” ใช้เวลานานแค่ไหน

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

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

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

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

  1. เหตุใดจึงใช้ Composition API
  2. ฟังก์ชัน setup() และตัวแปรรีแอกทีฟ
  3. ref กับ reactive: ควรใช้แบบใด
  4. Computed และ Watch ใน Composition API
← กลับไปที่ Vue Academy