Apa perbedaan antara watch dan watchEffect?

Question

Accepted Answer

Keduanya menjalankan efek samping sebagai respons terhadap perubahan reaktif, tetapi mereka berbeda dalam cara ketergantungan ditentukan dan informasi apa yang diberikan kepada Anda. Gunakan untuk efek samping (panggilan API, logging, pekerjaan DOM manual) — **bukan** untuk menurunkan nilai (itu adalah `computed`). ## watch — sumber eksplisit, memberikan nilai lama dan baru ```vue ``` `watch` mengawasi sumber **spesifik** yang Anda sebutkan, menjalankan callback hanya ketika sumber itu berubah, dan memberikan **nilai lama dan baru** — berguna ketika Anda perlu membandingkannya atau bereaksi terhadap bagian keadaan tertentu. ## watchEffect — pelacakan ketergantungan otomatis, berjalan segera ```vue ``` `watchEffect` **secara otomatis melacak** setiap nilai reaktif yang digunakan di dalamnya (tanpa daftar sumber), dan **berjalan segera saat setup** (kemudian berjalan ulang pada perubahan ketergantungan apa pun). Tidak ada nilai lama/baru. ## Berdampingan ```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 ``` ## Opsi watch yang berguna ```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 ``` ## Mengapa ini penting Memilih alat yang tepat membuat efek samping reaktif tetap bersih: gunakan **`computed`** untuk nilai turunan, **`watch`** ketika Anda perlu bereaksi terhadap sumber spesifik atau membandingkan lama/baru (misalnya ambil ketika id berubah), dan **`watchEffect`** untuk efek yang bergantung pada beberapa nilai dan harus melacaknya secara otomatis. Memanfaatkan watcher untuk penurunan nilai (bukan `computed`) adalah anti-pattern umum.