Vue Academy · Pelajaran

Pemerhati dan Kereaktifan Mendalam

Bertindak balas terhadap perubahan data dengan pemerhati dan pemerhatian mendalam.

Pelajaran 3 daripada 313 langkah

Pemerhati dan Kereaktifan Mendalam ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 3 daripada 3. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 3 pelajaran.

Apakah Pemerhati?

pemerhati menjalankan fungsi sebagai tindak balas terhadap perubahan data.

Berbeza daripada computed, ia digunakan untuk kesan sampingan
Mendapatkan data, membuat catatan, menyimpan ke storan
Anda bertindak balas apabila sesuatu yang khusus berubah

Fungsi watch

Fungsi watch menerima sumber untuk diperhatikan dan fungsi panggil balik yang menerima nilai baharu dan lama.

import { ref, watch } from "vue"

const query = ref("")

watch(query, (newVal, oldVal) => {
  console.log("changed from", oldVal, "to", newVal)
})

Contoh Praktikal

Memerhati input carian untuk mencetuskan panggilan API apabila nilainya berubah.

const search = ref("")

watch(search, async (newQuery) => {
  const results = await fetchResults(newQuery)
  items.value = results
})

Pilihan immediate

Secara lalai, pemerhati hanya dicetuskan apabila berlaku perubahan. Pilihan immediate turut menjalankannya sekali dengan serta-merta.

watch(userId, (id) => {
  loadUser(id)
}, { immediate: true })

// Runs immediately with the current value,
// then again on every change

Pilihan deep

Secara lalai, pemerhatian terhadap objek hanya dicetuskan apabila rujukannya berubah. Pilihan deep turut memerhati sifat bersarang.

const profile = reactive({ name: "Ada", address: { city: "London" } })

watch(profile, (val) => {
  console.log("profile changed")
}, { deep: true })

// Fires even when profile.address.city changes

Memerhati Objek Bersarang

Tanpa deep, perubahan pada sifat bersarang bagi objek reaktif yang diperhatikan mungkin tidak mencetuskan fungsi panggil balik seperti yang dijangka. deep memastikan perkara itu berlaku, tetapi memerlukan lebih banyak pemprosesan.

Gunakan deep hanya apabila penjejakan bersarang benar-benar diperlukan
Pemerhatian mendalam terhadap objek besar boleh menggunakan banyak sumber

Memerhati Getter

Untuk memerhati nilai bersarang yang khusus, hantarkan fungsi getter sebagai sumber.

watch(
  () => profile.address.city,
  (newCity) => {
    console.log("city is now", newCity)
  }
)

Memerhati Berbilang Sumber

Hantarkan tatasusunan sumber untuk memerhati beberapa nilai serentak.

watch([width, height], ([newW, newH], [oldW, oldH]) => {
  console.log("size:", newW, "x", newH)
})

watchEffect

watchEffect berjalan dengan serta-merta dan berjalan semula setiap kali mana-mana nilai reaktif yang dibacanya berubah. Tiada senarai sumber yang jelas diperlukan.

import { watchEffect } from "vue"

watchEffect(() => {
  console.log("count is", count.value)
})

// Runs now, and again whenever count changes

watch berbanding watchEffect

Pilihan antara kedua-duanya:

watch menggunakan sumber yang jelas, memberikan nilai lama dan baharu, serta bersifat malas secara lalai
watchEffect menjejaki kebergantungan secara automatik, berjalan dengan serta-merta dan tidak memberikan nilai lama

Gunakan watch apabila anda memerlukan nilai sebelumnya atau kawalan yang tepat; gunakan watchEffect untuk kemudahan.

Pemerhati dalam API Options

API Options mengisytiharkan pemerhati dalam blok watch yang dikenal pasti mengikut nama data.

export default {
  data() {
    return { question: "" }
  },
  watch: {
    question(newVal, oldVal) {
      this.getAnswer(newVal)
    }
  }
}

Semakan Pantas

Uji pemahaman anda tentang pemerhati.

Jawab dalam pelajaran interaktif

Rumusan: Pemerhati dan Kereaktifan Mendalam

Anda telah mempelajari cara bertindak balas terhadap perubahan dengan kesan sampingan:

watch memerhati sumber dan memberikan nilai baharu serta lama
immediate menjalankannya sekali pada permulaan
deep menjejaki perubahan pada objek bersarang
watchEffect menjejaki kebergantungan secara automatik dan berjalan dengan serta-merta
Perhatikan berbilang sumber menggunakan tatasusunan

Seterusnya: penghalaan dengan Vue Router.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Pemerhati dan Kereaktifan Mendalam” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “Pemerhati dan Kereaktifan Mendalam”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 3 pelajaran.

Apakah yang akan saya pelajari dalam “Pemerhati dan Kereaktifan Mendalam”?

Bertindak balas terhadap perubahan data dengan pemerhati dan pemerhatian mendalam. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 3.

Berapa lamakah pelajaran “Pemerhati dan Kereaktifan Mendalam” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Asas Kereaktifan
Sifat Computed
Pemerhati dan Kereaktifan Mendalam

← Kembali ke Vue Academy