Watchers: watch() dan watchEffect()

Penjelasan

watch() memantau SATU (atau beberapa) sumber data reaktif tertentu secara eksplisit, dan menjalankan callback HANYA saat sumber itu berubah — dapat akses nilai lama dan baru. watchEffect() lebih otomatis: menjalankan fungsinya SEKALI di awal, lalu otomatis melacak SEMUA data reaktif yang dipakai di dalamnya dan menjalankan ulang kalau salah satunya berubah, tanpa perlu menyebutkan sumbernya eksplisit.

Contoh Konsep

<script setup>
import { ref, watch, watchEffect } from 'vue';

const jumlahPesan = ref(0);

watch(jumlahPesan, (nilaiBaru, nilaiLama) => {
    console.log(`Berubah dari ${nilaiLama} ke ${nilaiBaru}`);
    document.title = `Kamu punya ${nilaiBaru} pesan baru`;
});

watchEffect(() => {
    console.log(`Pesan saat ini: ${jumlahPesan.value}`); // otomatis melacak jumlahPesan
});
</script>

Praktikum

Buat ref() suhu (number). Pakai watch() untuk mencetak ke console setiap kali suhu berubah, formatnya "Suhu berubah jadi: {nilai}".

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Pakai watch() saat kamu butuh akses NILAI LAMA sebelum berubah, atau cuma mau memantau SATU-DUA sumber spesifik — pakai watchEffect() saat kamu cuma peduli menjalankan efek berdasarkan data reaktif apa pun yang dipakai di dalamnya, tanpa perlu daftar sumber eksplisit.