Watcher dan Reaktivitas Mendalam
Tanggapi perubahan data dengan watcher dan pemantauan mendalam.
Watcher dan Reaktivitas Mendalam adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. 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 3 pelajaran total.
Apa Itu Pengamat
Pengamat menjalankan sebuah fungsi sebagai respons terhadap perubahan data.
- Berbeda dari properti terhitung, pengamat digunakan untuk efek samping
- Mengambil data, mencatat log, dan menyimpan ke penyimpanan
- Anda merespons ketika sesuatu yang spesifik berubah
Fungsi Pengamatan
Fungsi pengamatan menerima sumber yang diamati dan fungsi panggilan balik yang menerima nilai baru dan lama.
import { ref, watch } from "vue"
const query = ref("")
watch(query, (newVal, oldVal) => {
console.log("changed from", oldVal, "to", newVal)
})Contoh Praktis
Mengamati input search untuk memicu panggilan API ketika nilainya berubah.
const search = ref("")
watch(search, async (newQuery) => {
const results = await fetchResults(newQuery)
items.value = results
})Opsi Segera
Secara bawaan, pengamat hanya dijalankan ketika terjadi perubahan. Opsi segera juga menjalankannya sekali langsung.
watch(userId, (id) => {
loadUser(id)
}, { immediate: true })
// Runs immediately with the current value,
// then again on every changeOpsi Mendalam
Secara bawaan, pengamatan terhadap objek hanya dijalankan ketika referensinya berubah. Opsi mendalam juga mengamati properti bertingkat.
const profile = reactive({ name: "Ada", address: { city: "London" } })
watch(profile, (val) => {
console.log("profile changed")
}, { deep: true })
// Fires even when profile.address.city changesMengamati Objek Bertingkat
Tanpa pengamatan mendalam, perubahan pada properti bertingkat dari objek reaktif yang diamati mungkin tidak memicu fungsi panggilan balik seperti yang diharapkan. Pengamatan mendalam memastikannya tetap terpicu, tetapi membutuhkan lebih banyak pekerjaan.
- Gunakan pengamatan mendalam hanya jika Anda benar-benar memerlukan pelacakan bertingkat
- Pengamatan mendalam terhadap objek besar dapat membutuhkan banyak sumber daya
Mengamati Getter
Untuk mengamati nilai bertingkat tertentu, berikan fungsi pengambil sebagai sumbernya.
watch(
() => profile.address.city,
(newCity) => {
console.log("city is now", newCity)
}
)Mengamati Beberapa Sumber
Berikan sebuah larik sumber untuk mengamati beberapa nilai sekaligus.
watch([width, height], ([newW, newH], [oldW, oldH]) => {
console.log("size:", newW, "x", newH)
})watchEffect
watchEffect langsung dijalankan dan dijalankan kembali setiap kali nilai reaktif yang dibacanya berubah. Anda tidak perlu menentukan daftar sumber secara eksplisit.
import { watchEffect } from "vue"
watchEffect(() => {
console.log("count is", count.value)
})
// Runs now, and again whenever count changesPengamatan vs watchEffect
Memilih di antara keduanya:
- Pengamatan menggunakan sumber yang ditentukan secara eksplisit, memberikan nilai lama dan baru, serta secara bawaan tidak langsung dijalankan
- watchEffect melacak dependensi secara otomatis, langsung dijalankan, dan tidak memberikan nilai lama
Gunakan pengamatan ketika Anda memerlukan nilai sebelumnya atau kendali yang tepat; gunakan watchEffect untuk kemudahan.
Pengamat dalam API Options
API Options mendeklarasikan pengamat dalam blok pengamatan yang menggunakan nama data sebagai kuncinya.
export default {
data() {
return { question: "" }
},
watch: {
question(newVal, oldVal) {
this.getAnswer(newVal)
}
}
}Uji Cepat
Uji pemahaman Anda tentang pengamat.
Ringkasan: Pengamat dan Reaktivitas Mendalam
Anda telah mempelajari cara merespons perubahan dengan efek samping:
- Pengamatan mengamati sebuah sumber dan memberikan nilai baru serta lama
- Segera menjalankannya sekali di awal
- Mendalam melacak perubahan pada objek bertingkat
- watchEffect melacak dependensi secara otomatis dan langsung dijalankan
- Mengamati beberapa sumber dengan sebuah larik
Berikutnya: perutean dengan Vue Router.
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 42
- Pelajaran
- 156
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Watcher dan Reaktivitas Mendalam” gratis?
Ya — teks lengkap “Watcher dan Reaktivitas Mendalam” 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 3 pelajaran total.
Apa yang akan aku pelajari di “Watcher dan Reaktivitas Mendalam”?
Tanggapi perubahan data dengan watcher dan pemantauan mendalam. 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 3 dari 3.
Berapa lama pelajaran “Watcher dan Reaktivitas Mendalam” 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
- Dasar-Dasar Reaktivitas
- Properti Computed
- Watcher dan Reaktivitas Mendalam