Cara data vue3 memantau watch/watchEffect

Kita semua tahu bahawa peranan pendengar adalah untuk mencetuskan setiap kali keadaan reaktif berubah Dalam gabungan API, kita boleh menggunakan fungsi watch() dan fungsi watchEffect(),

Apabila anda menukar keadaan responsif, ia mungkin mencetuskan kemas kini komponen Vue dan panggilan balik pendengar pada masa yang sama.

Secara lalai, panggilan balik pendengar ciptaan pengguna akan dipanggil sebelum komponen Vue dikemas kini. Ini bermakna DOM yang anda akses dalam panggilan balik pendengar akan menjadi keadaan sebelum ia dikemas kini oleh Vue.

Jadi, mari kita lihat, bagaimana kita boleh memanfaatkannya dengan baik? Apakah perbezaan antara mereka?

fungsi watch()

jam perlu mendengar sumber data tertentu, seperti mendengar rujukan Parameter pertama jam tangan boleh menjadi "sumber data" dalam bentuk yang berbeza: ia boleh menjadi A

ref (termasuk sifat yang dikira), objek reaktif, fungsi getter atau susunan berbilang sumber data, Seperti berikut:

const x = ref(0)
const y = ref(0)

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)



// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})


const obj = reactive({ count: 0 })
//传入一个响应式对象
watch(obj, (newValue, oldValue) => {
  // 在嵌套的属性变更时触发
  // 注意：`newValue` 此处和 `oldValue` 是相等的
  // 因为它们是同一个对象！
})

obj.count++


watch(
  () => obj.count,
  (newValue, oldValue) => {
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // *除非* obj.count 被整个替换了
  },
  { deep: true }
)

Perhatikan bahawa anda tidak boleh mendengar terus nilai atribut objek reaktif

const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

Di sini anda perlu menggunakan fungsi

getter yang mengembalikan atribut:

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

jam tangan malas secara lalai: panggil balik hanya akan dilaksanakan apabila sumber data berubah. Tetapi dalam beberapa senario, kami mahu melaksanakan panggilan balik dengan segera apabila mencipta pendengar. Sebagai contoh, kami ingin meminta beberapa data awal dan kemudian meminta semula data apabila keadaan yang berkaitan berubah.

Kita boleh memaksa panggilan balik pendengar untuk melaksanakan serta-merta dengan menghantar pilihan

segera: benar:

watch(source, (newValue, oldValue) => {
  // 立即执行，且当 `source` 改变时再次执行
}, { immediate: true })

watchEffect() fungsi

watchEffect( ) membolehkan kami

menjejaki kebergantungan reaktif panggilan balik secara automatik.

const todoId = ref(1)
const data = ref(null)

watchEffect(async () => {
  const response = await fetch(
    `https://jsonplaceholder.typicode.com/todos/${todoId.value}`
  )
  data.value = await response.json()
})

Dalam contoh ini, panggilan balik akan dilaksanakan serta-merta,

tidak perlu menyatakan segera: benar. Semasa pelaksanaan, ia secara automatik menjejaki todoId.value sebagai kebergantungan (serupa dengan harta yang dikira). Apabila todoId.value berubah, panggilan balik akan dilaksanakan semula. Dengan watchEffect(), kami tidak lagi perlu menghantar todoId secara eksplisit sebagai nilai sumber .

watchEffect() sesuai untuk pendengar dengan pelbagai kebergantungan Untuk contoh ini dengan hanya satu kebergantungan, faedahnya agak kecil. Selain itu, jika anda perlu mendengar beberapa sifat dalam struktur data bersarang, watchEffect() mungkin lebih cekap daripada pendengar mendalam, kerana ia hanya akan menjejaki sifat yang digunakan dalam panggilan balik, dan bukannya menjejaki semua sifat secara rekursif.

Jika anda ingin mengakses DOM yang dikemas kini oleh Vue dalam panggilan balik pendengar, anda perlu menentukan pilihan

flush: ‘post’, post-flush watchEffect() Di sana adalah alias watchPostEffect():

import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* 在 Vue 更新后执行 */
})

Hubungan dan perbezaan antara jam tangan dan watchEffect

Kedua-dua jam tangan dan watchEffect boleh melaksanakan panggilan balik dengan kesan sampingan secara responsif. Perbezaan utama antara mereka ialah cara

menjejak kebergantungan reaktif:

tonton hanya runut

sumber data yang didengari secara eksplisit. Ia tidak akan menjejaki apa-apa yang diakses dalam panggilan balik. Selain itu, panggil balik hanya akan dicetuskan jika sumber data benar-benar berubah. jam tangan akan mengelakkan kebergantungan penjejakan apabila kesan sampingan berlaku, jadi kami boleh mengawal dengan lebih tepat apabila fungsi panggil balik dicetuskan.

watchEffect akan menjejaki kebergantungan semasa berlakunya kesan sampingan. Ia secara automatik akan menjejaki semua sifat reaktif yang boleh diakses semasa penyegerakan. Ini lebih mudah dan kodnya cenderung lebih bersih, tetapi kadangkala kebergantungan reaktifnya kurang jelas.

Sesuai untuk pendengar dengan pelbagai kebergantungan

Atas ialah kandungan terperinci Cara data vue3 memantau watch/watchEffect. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!