ความแตกต่างระหว่าง watch และ watchEffect คืออะไร?

Question

Accepted Answer

ทั้งสองทำการรันผลข้างเคียงตอบสนองต่อการเปลี่ยนแปลงแบบรีแอกทีฟ แต่แตกต่างกันในวิธีการระบุการพึ่งพาและข้อมูลที่ให้มา ใช้มันสำหรับผลข้างเคียง (การเรียก API การบันทึก การทำงาน DOM ด้วยตนเอง) — **ไม่ใช่** สำหรับการหาค่าอื่น (นั่นคือ `computed`). ## watch — แหล่งที่มาชัดแจ้ง ให้ค่าเก่า + ค่าใหม่ ```vue ``` `watch` ดูแลแหล่งที่มา **เฉพาะ** ที่คุณตั้งชื่อ เรียกใช้ callback เฉพาะเมื่อแหล่งที่มานั้นเปลี่ยนแปลง และให้ **ค่าเก่าและค่าใหม่** — มีประโยชน์เมื่อคุณต้องเปรียบเทียบหรือตอบสนองต่อส่วนโครงสร้างเฉพาะ ## watchEffect — การติดตามการพึ่งพาอย่างอัตโนมัติ รันทันที ```vue ``` `watchEffect` **ติดตามโดยอัตโนมัติ** ทุกค่าที่รีแอกทีฟที่ใช้ในนั้น (ไม่มีรายการแหล่งที่มา) และ **ทำงานทันทีในการตั้งค่า** (จากนั้นรันใหม่เมื่อการพึ่งพาใด ๆ เปลี่ยนแปลง) ไม่มีค่าเก่า/ใหม่ ## เคียงข้าง ```text watch watchEffect Dependencies explicit (you name them) automatic (tracked from usage) Runs immediately? no (unless immediate:true) yes Old + new values? yes no Best for reacting to specific state, running an effect that depends needing prev value on several values ``` ## ตัวเลือก watch ที่มีประโยชน์ ```js watch(source, cb, { immediate: true, // run once right away (like watchEffect) deep: true, // watch nested object changes }); watch([a, b], ([newA, newB]) => {}); // watch multiple sources ``` ## เพราะเหตุใดจึงสำคัญ การเลือกเครื่องมือที่ถูกต้องช่วยให้ผลข้างเคียงแบบรีแอกทีฟสะอาด: ใช้ **`computed`** สำหรับค่าที่ได้มา **`watch`** เมื่อคุณต้องตอบสนองต่อแหล่งที่มาเฉพาะหรือเปรียบเทียบค่าเก่า/ใหม่ (เช่น ดึงข้อมูลเมื่อ id เปลี่ยน) และ **`watchEffect`** สำหรับผลข้างเคียงที่ขึ้นอยู่กับค่าหลายค่าและควรติดตามโดยอัตโนมัติ การใช้วัตเจอร์อย่างผิดวิธีเพื่อการหาค่า (แทน `computed`) เป็นรูปแบบการต่อต้านทั่วไป