Computed dan Watch dalam Composition API
computed() untuk state turunan, watch() dan watchEffect() untuk efek samping.
Computed dan Watch dalam Composition API adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.
Menurunkan dan Merespons State
State reaktif hanyalah setengah dari keseluruhan cerita. Anda juga perlu menurunkan nilai baru darinya dan merespons perubahan. API Komposisi menyediakan computed, watch, dan watchEffect untuk hal ini.
computed untuk Nilai Turunan
computed() menerima fungsi pengambil dan mengembalikan ref yang nilainya diturunkan dari state reaktif lainnya. Akses dengan .value dalam JS; di templat, nilainya dibuka secara otomatis.
import { ref, computed } from 'vue'
const count = ref(2)
const doubled = computed(() => count.value * 2)
console.log(doubled.value) // 4computed Bersifat Malas dan Tersimpan di Cache
computed hanya menghitung ulang saat salah satu dependensi reaktifnya berubah. Jika Anda membacanya sepuluh kali tanpa perubahan, fungsi pengambil hanya berjalan sekali dan hasil yang tersimpan di cache digunakan kembali.
Hal ini membuat computed ideal untuk penurunan nilai yang mahal.
computed Diperbarui Secara Otomatis
Ubah sebuah dependensi, dan computed akan diperbarui saat dibaca berikutnya. Anda tidak perlu memanggilnya secara manual.
const count = ref(2)
const doubled = computed(() => count.value * 2)
count.value = 5
console.log(doubled.value) // 10watch untuk Efek Samping
watch() mengamati sumber reaktif dan menjalankan fungsi panggilan balik saat sumber tersebut berubah. Fungsi panggilan balik menerima nilai baru dan nilai lama.
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newVal, oldVal) => {
console.log('changed from', oldVal, 'to', newVal)
})watch Bersifat Malas Secara Bawaan
Berbeda dengan computed, watch tidak langsung menjalankan fungsi panggilannya. Fungsi tersebut menunggu perubahan pertama. Gunakan untuk efek samping: pencatatan, pengambilan data, dan penyimpanan ke penyimpanan.
Mengamati Beberapa Sumber
Berikan larik sumber untuk mengamati beberapa nilai sekaligus. Fungsi panggilan balik menerima larik nilai baru dan lama.
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
console.log(newCount, newName)
})Mengamati Fungsi Pengambil
Untuk mengamati properti objek reaktif, berikan fungsi pengambil. Mengamati objek secara langsung hanya terpicu oleh perubahan mendalam, yang dapat mengejutkan.
const state = reactive({ count: 0 })
watch(() => state.count, (newVal) => {
console.log('count is', newVal)
})watchEffect: Pelacakan Otomatis dan Eksekusi Langsung
watchEffect() langsung menjalankan fungsinya dan menjalankannya kembali setiap kali nilai reaktif apa pun yang digunakan di dalamnya berubah. Anda tidak perlu mencantumkan dependensi — dependensi tersebut dilacak secara otomatis.
import { ref, watchEffect } from 'vue'
const count = ref(0)
watchEffect(() => {
console.log('count is', count.value)
})
// logs immediately, then on every changewatch dibandingkan dengan watchEffect
watch: sumber eksplisit, berjalan secara tertunda, serta memberikan nilai lama dan baru.watchEffect: melacak dependensi secara otomatis, berjalan segera, dan tidak dapat mengakses nilai lama.
Gunakan watch saat Anda memerlukan nilai sebelumnya atau ingin memiliki kendali yang tepat. Gunakan watchEffect untuk efek samping reaktif yang cepat.
computed dibandingkan watch
Gunakan computed saat Anda ingin mendapatkan nilai turunan baru. Gunakan watch atau watchEffect saat Anda ingin melakukan tindakan sebagai respons terhadap perubahan. Jangan gunakan watch untuk menghitung ulang nilai—itulah kegunaan computed.
Pemeriksaan Singkat
Pilih pembantu reaktif yang tepat.
Rangkuman
Sekarang Anda mengetahui cara menurunkan nilai dan merespons perubahan:
computedmembuat nilai turunan yang ditunda dan disimpan dalam cache.watchmerespons sumber tertentu serta memberikan nilai baru dan lama; prosesnya ditunda.watchEffectberjalan segera dan melacak dependensi secara otomatis.- Gunakan computed untuk nilai, serta watch/watchEffect untuk efek samping.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Computed dan Watch dalam Composition API” gratis?
Ya — teks lengkap “Computed dan Watch dalam Composition API” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Computed dan Watch dalam Composition API”?
computed() untuk state turunan, watch() dan watchEffect() untuk efek samping. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Vue Academy?
Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Computed dan Watch dalam Composition API” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?
Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Mengapa Composition API?
- Fungsi setup() dan Variabel Reaktif
- ref vs reactive: Kapan Menggunakan Masing-Masing
- Computed dan Watch dalam Composition API