Cara menggunakan EffectScope dalam Vue3

Vue versi 3.2 memperkenalkan API skop Kesan baharu Gunakan effectScope untuk mencipta skop kesan, yang boleh menangkap kesan sampingan reaktif (iaitu sifat dikira dan pendengar) yang dicipta di dalamnya, supaya kesan sampingan yang ditangkap boleh diproses bersama. Kaedah getCurrentScope boleh digunakan untuk mendapatkan skop kesan aktif pada masa ini. Untuk mendaftarkan fungsi panggil balik pengendali dalam skop kesan yang sedang aktif, gunakan onScopeDispose. Fungsi panggil balik ini dipanggil apabila skop kesan yang berkaitan dihentikan.

const scope = effectScope()

scope.run(() => {
  const doubled = computed(() => counter.value * 2)

  watch(doubled, () => console.log(doubled.value))

  watchEffect(() => console.log('Count: ', doubled.value))
})

// 处理掉当前作用域内的所有 effect
scope.stop()

Dalam persediaan Vue, respons akan dikumpulkan pada permulaan permulaan Apabila tika dinyahpasang, respons akan dinyahjejak secara automatik, yang merupakan ciri yang sangat mudah.

Walau bagaimanapun, ini boleh menjadi sangat menyusahkan apabila kita menggunakannya di luar komponen atau menulis pakej yang berasingan. Bagaimanakah saya boleh mengalih keluar pergantungan reaktif pada pengiraan dan menonton dalam fail berasingan?

Kod sampel, pautan rujukan

const disposables = []

const counter = ref(0)
const doubled = computed(() => counter.value * 2)

disposables.push(() => stop(doubled.effect))

const stopWatch2 = watchEffect(() => {
  console.log(`counter: ${counter.value}`)
})

disposables.push(stopWatch2)

const stopWatch3 = watch(doubled, () => {
  console.log(doubled.value)
})

disposables.push(stopWatch3)

Dalam kod di atas, kami menulis sejumlah tiga kebergantungan responsif untuk dikira & jam tangan, dan menyimpan stopHandle kebergantungan responsif ini dalam tatasusunan, yang bermaksud bahawa kita perlu mengekalkan tatasusunan ini supaya apabila diperlukan pada masa hadapan, kita boleh menghentikan semua respons secara langsung seperti berikut:

disposables.forEach((f) => f())
disposables = []

Terutama apabila berurusan dengan beberapa kod fungsi gabungan yang kompleks, mengumpul semua kebergantungan reaktif secara manual adalah membosankan. Jika anda tidak mempunyai akses kepada kebergantungan reaktif yang dibuat dalam fungsi yang terdiri, pengumpulannya boleh dilupakan dengan mudah, yang boleh menyebabkan kebocoran memori dan tingkah laku yang tidak dijangka.

Ciri ini ialah percubaan untuk mengabstrakkan setup() reaktif pengumpulan dan fungsi pemprosesan ke dalam API yang lebih umum yang boleh digunakan semula di luar model komponen.

Ia juga menyediakan keupayaan untuk mencipta kesan "terpisah" daripada skop persediaan() komponen atau skop yang ditentukan pengguna.

Apakah masalah yang diselesaikan oleh ciri ini?

// global shared reactive state
let foo

function useFoo() {
  if (!foo) { // lazy initialization
      foo = ref()
      watch(foo, ...) // <- this is stopped when component that created it is unmounted
      // make some http calls etc
  }
  return foo
}

component1 = {
    setup() {
        useFoo() // lazily initialize
    }
}

component2 = {
    setup() {
        useFoo() // lazily initialize
    }
}

Saya mempunyai fungsi terdiri yang berkongsi fungsi antara berbilang komponen, masalahnya ialah apabila komponen pertama yang dipanggil component1 berhenti menggunakan kebergantungan reaktif. Memandangkan kesan berterusan pada pembolehubah global foo menjejaskan panggilan ke komponen lain, kesan ini perlu dihentikan.

Atas ialah kandungan terperinci Cara menggunakan EffectScope dalam Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!