Ketahui tentang watchEffect dalam Vue3 dalam satu artikel dan bincangkan tentang senario aplikasinya!

Artikel ini akan membawa anda melalui watchEffect dalam Vue3, memperkenalkan kesan sampingannya dan bercakap tentang perkara yang boleh dilakukannya, saya harap ia dapat membantu semua orang.

watchEffect, yang melaksanakan fungsi yang diluluskan dengan serta-merta sambil menjejak kebergantungannya secara reaktif dan menjalankan semula fungsi tersebut apabila kebergantungannya berubah. (Belajar perkongsian video: tutorial video vue)

Dalam erti kata lain: watchEffect adalah bersamaan dengan menggabungkan sumber kebergantungan dan fungsi panggil balik watch apabila anda menggunakan sebarang reaktif Apabila kebergantungan dikemas kini, fungsi panggil balik akan dilaksanakan semula. Tidak seperti watch, fungsi panggil balik watchEffect akan dilaksanakan serta-merta (iaitu { immediate: true })

Artikel ini terutamanya bercakap tentang cara menggunakan 清除副作用 untuk menjadikan kod kami lebih elegan~

Kesan sampingan watchEffect

Apakah kesan sampingan (side effect)? Secara ringkasnya, kesan sampingan adalah untuk melakukan operasi tertentu, seperti pengubahsuaian data pembolehubah luaran atau pembolehubah , panggilan ke antara muka luaran, dsb. Fungsi panggil balik watchEffect ialah fungsi kesan sampingan, kerana kami menggunakan watchEffect untuk melaksanakan operasi tertentu selepas mendengar perubahan dalam kebergantungan.

Apabila fungsi kesan sampingan dilaksanakan, ia pasti akan memberi sedikit kesan kepada sistem Contohnya, pemasa setInterval dilaksanakan dalam fungsi kesan sampingan, jadi kita mesti menangani kesan sampingan. Fungsi Vue3 watchEffect yang mendengar kesan sampingan boleh menerima fungsi onInvalidate sebagai parameter input untuk mendaftarkan panggilan balik apabila pembersihan gagal. Panggilan balik ketidaksahihan ini akan dicetuskan apabila:

• Kesan sampingan akan dilaksanakan semula (iaitu nilai kebergantungan berubah)
• Pendengar dihentikan (dipulangkan oleh panggilan eksplisit) Nilai berhenti mendengar, atau berhenti mendengar dipanggil secara tersirat apabila komponen dipunggah)

import { watchEffect, ref } from 'vue'

const count = ref(0)
watchEffect((onInvalidate) => {
  console.log(count.value)
  onInvalidate(() => {
    console.log('执行了onInvalidate')
  })
})

setTimeout(()=> {
  count.value++
}, 1000)

Arahan yang dicetak oleh kod di atas ialah: 0 -> > -> 执行了onInvalidate，最后执行1

dicetak dahulu count, dan kemudian kerana pemasa mengemas kini nilai 0 kepada count, sebelah kesan akan dilaksanakan semula pada masa ini, jadi 1 Fungsi panggil balik akan dicetuskan, mencetak onInvalidate, dan kemudian melaksanakan fungsi kesan sampingan, mencetak nilai 执行了onInvalidate count. 1

import { watchEffect, ref } from 'vue'

const count = ref(0)
const stop = watchEffect((onInvalidate) => {
  console.log(count.value)
  onInvalidate(() => {
    console.log('执行了onInvalidate')
  })
})

setTimeout(()=> {
  stop()
}, 1000)

untuk berhenti mendengar, fungsi panggil balik stop juga akan dicetuskan. Begitu juga, apabila komponen di mana onInvalidatewatchEffect terletak dinyahpasang, secara tersirat akan memanggil fungsi untuk berhenti mendengar, jadi fungsi panggil balik stop juga boleh dicetuskan. onInvalidate

Aplikasi watchEffect

yang tidak malas dan yang diluluskan dalam watchEffect Apa yang boleh kita lakukan? onInvalidate

Senario 1: Biasanya kita mentakrifkan pemasa atau mendengar acara Kita perlu mentakrifkan atau mendaftarkannya dalam fungsi cangkuk kitaran hayat, dan kemudian mountedKosongkan. pemasa atau batalkan fungsi mendengar dalam fungsi cangkuk. Dengan cara ini, logik kita bertaburan dalam dua kitaran hayat, yang tidak kondusif untuk penyelenggaraan dan pembacaan. beforeUnmount

, logik penciptaan dan pemusnahan disatukan, dan kod itu lebih elegan dan mudah dibaca~watchEffect

// 定时器注册和销毁
watchEffect((onInvalidate) => {
  const timer = setInterval(()=> {
    // ...
  }, 1000)
  onInvalidate(() => clearInterval(timer))
})

const handleClick = () => {
 // ...
}
// dom的监听和取消监听
onMounted(()=>{
  watchEffect((onInvalidate) => {
    document.querySelector('.btn').addEventListener('click', handleClick, false)
    onInvalidate(() => document.querySelector('.btn').removeEventListener('click', handleClick))
  })
})

Senario 2 : Menggunakan watchEffect Buat pendikit anti goncang (seperti membatalkan permintaan)

const id = ref(13)
watchEffect(onInvalidate => {
   // 异步请求
  const token = performAsyncOperation(id.value)
  // 如果id频繁改变，会触发失效函数，取消之前的接口请求
  onInvalidate(() => {
    // id has changed or watcher is stopped.
    // invalidate previously pending async operation
    token.cancel()
  })
})

juga boleh melakukan banyak perkara, seperti membuka watchEffect tetingkap Pop timbul yang diubah suai, jika perubahan dalam modal dikesan, kita boleh menetapkan semula parameter awal dalam fungsi id... Ini hanya pengenalan, saya harap semua orang akan meneroka lebih lanjut~onInvalidate

Pembangunan bahagian hadapan web, Video pengaturcaraan asas)

Atas ialah kandungan terperinci Ketahui tentang watchEffect dalam Vue3 dalam satu artikel dan bincangkan tentang senario aplikasinya!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!