Cara menggunakan $watchEffect dalam Vue untuk mengumpulkan kebergantungan secara automatik

Dalam Vue, $watchEffect ialah API untuk memantau perubahan data responsif dan boleh mengumpul kebergantungan secara automatik tanpa menyatakan data yang akan dipantau secara manual. Dalam Vue 3, $watchEffect menggantikan kaedah $watch dalam Vue 2 dan menjadi kaedah pemantauan data responsif yang lebih mudah dan cekap. Berikut akan memperkenalkan cara menggunakan $watchEffect dalam Vue untuk mengumpulkan kebergantungan secara automatik.

1. Buat tika Vue

Pertama, kita perlu mencipta tika Vue. Ia boleh dibuat melalui kaedah Vue.createApp(). Kaedah ini mengembalikan apl contoh aplikasi.

const app = Vue.createApp({
  data() {
    return {
      count: 0
    }
  }
})

2. Gunakan $watchEffect untuk memantau perubahan data

Seterusnya, kami menggunakan $watchEffect untuk memantau perubahan dalam kiraan data. Apabila nilai kiraan berubah, $watchEffect akan menjalankan fungsi kesan sampingan yang berkaitan secara automatik dan mengumpul kebergantungan.

app.mount('#app')

app.config.globalProperties.$watchEffect(() => {
  console.log('count is', app._data.count)
})

Di sini, kami menggunakan fungsi kesan sampingan untuk mencetak nilai kiraan semasa. Dalam aplikasi projek sebenar, fungsi kesan sampingan boleh melakukan operasi yang lebih kompleks, seperti mengemas kini nod DOM dan sebagainya. $watchEffect akan secara automatik mengumpul sebarang sifat reaktif dalam tika Vue (termasuk sifat yang dikira, kaedah, dll.), dan secara automatik menjalankan fungsi kesan sampingan apabila data sifat ini berubah. Dengan cara ini, kami tidak perlu menentukan data secara manual untuk didengar, dan kami juga tidak perlu mengurus pengumpulan pergantungan secara manual.

3. Ubah suai data responsif

Akhir sekali, kita boleh cuba mengubah suai nilai kiraan untuk melihat sama ada $watchEffect boleh berfungsi dengan betul.

setTimeout(() => {
  app._data.count += 1
}, 1000)

Fungsi setTimeout digunakan untuk melengahkan tempoh masa untuk mensimulasikan kesan perubahan data. Apabila nilai kiraan berubah, $watchEffect akan menjalankan fungsi kesan sampingan secara automatik dan mencetak nilai kiraan baharu.

Melalui contoh mudah ini, kita dapat melihat bahawa $watchEffect boleh membantu kami mengumpul kebergantungan secara automatik dan menjalankan fungsi kesan sampingan yang berkaitan apabila data berubah, mengelakkan masalah pengurusan kebergantungan manual. Dalam projek sebenar, $watchEffect ialah API pemantauan data responsif yang sangat praktikal, yang boleh meningkatkan kecekapan pembangunan dan mengurangkan kebarangkalian ralat.

Atas ialah kandungan terperinci Cara menggunakan $watchEffect dalam Vue untuk mengumpulkan kebergantungan secara automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!