Bagaimana cara menggunakan Watcheffect di Vue 3?

Watcheffect digunakan dalam VUE 3 untuk mengesan kebergantungan responsif secara automatik dan melakukan kesan sampingan. Kelebihan terasnya adalah bahawa ia adalah pengumpulan ketergantungan automatik tanpa secara manual menentukan sumber pendengaran. 1. Ia melaksanakan fungsi masuk dengan segera dan secara automatik menjejaki data responsif (seperti ref, reaktif) yang diakses di dalamnya, dan dilaksanakan semula apabila data ini berubah. 2. Berkenaan dengan logik penyegerakan, pengiraan penyegerakan automatik (seperti FullName Dependency FirstName dan LastName), dan kesan sampingan permulaan (seperti log, kemas kini DOM). 3. Menyokong operasi tak segerak, tetapi perlu dibersihkan dengan onInvalidate untuk mengelakkan keadaan kaum, seperti menggunakan AbortController untuk mengganggu permintaan yang sudah lapuk. 4. Logik pelaksanaan boleh dikawal melalui penyata bersyarat, tetapi pembolehubah yang tidak disahkan tidak akan dikesan, yang mungkin membawa kepada kemas kini yang tidak dijawab dan harus dikendalikan dengan berhati -hati. 5. Berbanding dengan Watch, Watcheffect tidak boleh mendapatkan nilai -nilai lama, tidak dapat mengawal masa yang mencetuskan (seperti dalam, pendikit), dan sentiasa dilaksanakan dengan segera. Oleh itu, Watcheffect harus digunakan untuk mencapai senario pemantauan automatik yang mudah, dan menonton harus digunakan apabila nilai lama, sasaran pemantauan khusus, atau kawalan asynchronous multi-stage diperlukan. Singkatnya, Watcheffect sesuai untuk senario di mana "jika data yang saya gunakan perubahan, ia akan dilaksanakan", tetapi perhatian harus dibayar kepada skop penjejakan keselamatan dan kebergantungan tak segerak.

watchEffect di Vue 3 adalah API reaktif berguna untuk mengesan secara automatik kebergantungan reaktif dan menjalankan kesan sampingan apabila mereka berubah. Ia lebih mudah daripada watch dalam banyak kes kerana anda tidak perlu menentukan secara jelas apa yang anda menonton - Vue angka ia secara automatik dengan mengesan nilai reaktif yang diakses semasa kesannya.

Inilah cara menggunakan watchEffect dengan berkesan:

✅ Apa yang dilakukan watchEffect

Apabila anda memanggil watchEffect , anda lulus fungsi yang Vue segera berjalan dan di mana ia menjejaki sebarang pembolehubah reaktif (seperti ref atau reactive ) yang diakses. Apabila mana -mana nilai yang dikesan berubah kemudian, fungsi berjalan lagi.

 import {ref, watcheffect} dari 'vue'

const count = ref (0)

Watcheffect (() => {
  Console.log ('Count berubah:', Count.Value)
})

? Output:

 Kiraan berubah: 0 (segera pada penciptaan)
Count berubah: 1 (selepas Count.Value kemudian)
Count berubah: 2
…

Sebaik sahaja perubahan count.value , kesannya semula.

? Ciri -ciri utama dan kes penggunaan

1. Penjejakan ketergantungan automatik

Anda tidak perlu menyenaraikan kebergantungan - VUE menganalisis nilai reaktif yang anda gunakan di dalam panggilan balik.

 const firstName = ref ('')
const lastName = ref ('')
const fullName = ref ('')

Watcheffect (() => {
  fullName.value = firstName.Value '' LastName.Value
})

• Kesan ini berjalan pada mulanya.
• Ia akan dijalankan semula apabila perubahan firstName.value atau lastName.value .
• Tidak perlu menentukannya secara eksplisit.

2. Kesan sampingan dengan operasi async

Berguna untuk panggilan API atau tugas async lain yang bergantung kepada keadaan reaktif.

 const userId = ref (1)
const userData = ref (null)

WatchEffect (async () => {
  const res = menunggu pengambilan (`/api/pengguna/$ {userid.value}`)
  userData.Value = menunggu res.json ()
})

⚠️ Tetapi berhati-hati: watchEffect tidak menunggu fungsi async selesai sebelum berjalan semula. Anda mungkin memerlukan pembersihan atau syarat untuk mengelakkan keadaan kaum.

Corak yang lebih baik dengan pembersihan:

 WatchEffect (async (onInvalidate) => {
  Biarkan AbortController = baru AbortController ()
  onInvalidate (() => {
    abortController.abort ()
  })

  const res = menunggu pengambilan (`/api/pengguna/$ {userid.value}`, {signal: abortcontroller.signal})
  userData.Value = menunggu res.json ()
})

onInvalidate membolehkan anda mendaftarkan logik pembersihan yang berjalan sebelum kesan pencetus semula.

3. Menonton bersyarat / pulangan awal

Anda boleh menjalankan logik di dalam watchEffect . Ia masih menjejaki hanya apa yang anda akses.

 const enabled = ref (palsu)
nama const = ref ('')

Watcheffect (() => {
  jika (! enabled.value) kembali
  Console.log ('Nama:', Name.Value)
})

• Kesan berjalan pada mulanya.
• Hanya log apabila enabled.value adalah true .
• Masih bertindak balas terhadap perubahan dalam name.value hanya apabila enabled adalah benar? Sebenarnya - tidak.

⚠️ PENTING: Kerana name.value hanya diakses apabila enabled.value Nilai adalah benar, ia tidak dikesan sebaliknya. Jadi jika perubahan name semasa enabled adalah palsu, kesannya tidak akan dijalankan semula apabila enabled menjadi benar-kecuali sesuatu yang lain mencetuskannya.

Jadi tingkah laku ini boleh menjadi rumit. Jika anda mahukan penjejakan yang konsisten, pertimbangkan penstrukturan semula atau gunakan watch dengan kebergantungan yang jelas.

⚠ Ketinggian dan gotchas

• Tiada akses kepada nilai lama : Tidak seperti watch , anda tidak boleh mendapatkan nilai sebelumnya ketergantungan.
• Berjalan dengan segera pada penciptaan : kesannya berjalan segera, jadi pastikan kebergantungan dimulakan.
• Tidak boleh mencetuskan pencetus : anda tidak boleh menentukan kemas kini dalam cetek, atau pendikit seperti dalam beberapa pilihan watch maju.
• Keadaan kaum dengan Async : Seperti yang disebutkan, pelbagai panggilan async boleh menyelesaikan perintah.

? watchEffect vs watch

Gunakan watchEffect Bila:

• Anda mahu kereaktifan yang mudah dan automatik.
• Logik ini segerak dan mudah.
• Anda bertindak balas terhadap beberapa pembolehubah reaktif yang saling berkaitan.

Gunakan watch When:

• Anda perlu tahu nilai lama/baru.
• Anda menonton prop atau nilai yang dikira tertentu.
• Anda mahukan lebih banyak kawalan ke atas masa atau prestasi.

✅ Ringkasan: Bila Menggunakan watchEffect

• Auto menonton beberapa sumber reaktif yang semuanya digunakan di satu tempat.
• Memulakan atau menyegerakkan kesan sampingan (contohnya, pembalakan, kemas kini DOM, langganan).
• Logik seperti yang dikira mudah dengan kesan sampingan.

Contoh: Data bentuk penjimatan automatik

 const form = ref ({name: '', e -mel: ''})
const isDirty = ref (palsu)

Watcheffect (() => {
  jika (form.value.name || form.value.email) {
    isDirty.Value = true
    SaveToloCalStorage (form.Value)
  }
})

Ia bertindak balas apabila sifat -sifat form.value berubah - bersih dan ringkas.

Pada asasnya, watchEffect sangat bagus untuk "bila -bila masa yang saya gunakan di sini berubah, lakukan senario ini. Cukup perhatikan logik async dan skop penjejakan.

Atas ialah kandungan terperinci Bagaimana cara menggunakan Watcheffect di Vue 3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!