0Pricing
Frontend Academy · Pelajaran

computed() dan watch()

Turunkan nilai secara lazy dengan computed(), tanggapi perubahan state dengan watch() dan watchEffect(), serta kendalikan waktu flush.

computed() dan watch() adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

computed() dalam API Komposisi

computed(fn) membuat ref reaktif hanya-baca yang menghasilkan nilainya dari sumber reaktif lain. Nilainya disimpan dalam cache—getter hanya dijalankan saat dependensinya berubah.

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

const items = ref([{ price: 10 }, { price: 20 }, { price: 30 }]);
const tax = ref(0.1);

const subtotal = computed(() => items.value.reduce((s, i) => s + i.price, 0));
const total = computed(() => subtotal.value * (1 + tax.value));
</script>

computed() yang Dapat Ditulis

Teruskan objek dengan get dan set untuk membuat computed yang dapat ditulis. Setter menangani pembaruan, biasanya dengan meneruskan perubahan kembali ke ref sumber.

const firstName = ref('Alice');
const lastName  = ref('Smith');

const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (val: string) => {
    [firstName.value, lastName.value] = val.split(' ');
  }
});

fullName.value = 'Bob Jones'; // sets both refs

Dasar-dasar watch()

watch(source, callback) menjalankan fungsi panggilan balik saat sumber berubah. Fungsi panggilan balik menerima nilai baru dan lama.

import { ref, watch } from 'vue';

const query = ref('');

watch(query, (newVal, oldVal) => {
  console.log(`Changed from '${oldVal}' to '${newVal}'`);
  searchAPI(newVal);
});

Mengamati ref vs reactive

Amati ref secara langsung. Untuk mengamati properti reaktif, gunakan fungsi getter () => state.prop.

const count = ref(0);
watch(count, val => console.log('count:', val));

const state = reactive({ count: 0, name: '' });
watch(() => state.count, val => console.log('state.count:', val));

Pengamatan Mendalam

Teruskan { deep: true } untuk mengamati perubahan bersarang dalam ref objek.

const user = ref({ name: 'Alice', address: { city: 'NY' } });

watch(user, (newUser) => {
  console.log('user changed:', newUser);
}, { deep: true });

Pengamatan Langsung

Teruskan { immediate: true } agar fungsi panggilan balik langsung dijalankan saat penyiapan, sebelum terjadi perubahan apa pun. Ini berguna saat Anda ingin menjalankan efek samping dengan nilai awal.

watch(userId, async (id) => {
  user.value = await fetchUser(id);
}, { immediate: true }); // runs once on setup, then on change

watchEffect()

watchEffect(fn) langsung menjalankan fungsi panggilan balik dan menjalankannya kembali setiap kali dependensi reaktif yang digunakan di dalamnya berubah. Anda tidak perlu menentukan sumber secara eksplisit.

import { watchEffect } from 'vue';

watchEffect(() => {
  // runs immediately and whenever query or page changes:
  fetchResults(query.value, page.value);
});

watchEffect vs watch

watchEffect: langsung dijalankan, melacak dependensi secara otomatis, dan tidak dapat mengakses nilai lama. watch: sumber ditentukan secara eksplisit, secara bawaan berjalan secara malas, dan dapat mengakses nilai lama serta baru. Gunakan watchEffect untuk efek samping deklaratif; gunakan watch saat Anda memerlukan kendali atas waktu dan frekuensi pelaksanaannya.

Menghentikan Pengamat

watch dan watchEffect sama-sama mengembalikan fungsi stop. Panggil fungsi tersebut untuk menghentikan pengamatan. Dalam