Vue Academy · Pelajaran

effectScope untuk Kesan Berkumpulan

effectScope(), menjalankan pemerhati dan computed dalam skop, scope.stop() untuk pembersihan.

Pelajaran 4 daripada 413 langkah

effectScope untuk Kesan Berkumpulan ialah pelajaran Vue Academy percuma di CoddyKit. Ini ialah pelajaran 4 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Vue Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Masalah Pembersihan

Pemerhati dan nilai terhitung yang dicipta di luar persediaan komponen tidak dilupuskan secara automatik. Dalam komposabel yang digunakan secara kendiri atau kod peringkat pemalam, anda boleh membocorkan kesan reaktif. effectScope menyelesaikan masalah ini dengan mengumpulkan kesan untuk pembersihan secara kolektif.

Fungsi effectScope

effectScope() mencipta scope yang menangkap sebarang kesan reaktif (pemerhati, nilai terhitung) yang dicipta semasa ia berjalan. Kemudian anda menghentikan scope itu untuk melupuskan semuanya serentak.

import { effectScope } from "vue"

const scope = effectScope()

Mengumpulkan Kesan dengan run

Panggil scope.run(fn) dan cipta pemerhati serta nilai terhitung anda di dalam fn. Setiap kesan yang dicipta semasa panggilan itu didaftarkan dengan scope.

import { effectScope, ref, watch, computed } from "vue"

const scope = effectScope()
scope.run(() => {
  const count = ref(0)
  const doubled = computed(() => count.value * 2)
  watch(count, (v) => console.log(v))
})

Menghentikan scope

scope.stop() menghentikan setiap pemerhati dan nilai terhitung yang dicipta di dalam scope melalui satu panggilan — tiada keperluan untuk menjejaki setiap pemegang stop secara berasingan.

scope.stop() // disposes all watchers and computed at once

Mengapa Ini Penting

Tanpa scope, anda perlu menangkap pemegang stop bagi setiap pemerhati dan memanggilnya satu demi satu. Dengan banyak kesan, cara ini mudah menyebabkan ralat. Satu scope menukarkan N pembersihan kepada satu.

// without scope: must track each
const stop1 = watch(a, fn)
const stop2 = watch(b, fn)
// stop1(); stop2(); ... easy to forget one

Scope Bersarang

Scope boleh bersarang. Satu child scope yang dicipta di dalam parent akan dihentikan secara automatik apabila parent dihentikan, jadi anda memperoleh pembersihan berhierarki secara percuma.

const parent = effectScope()
parent.run(() => {
  const child = effectScope() // stopped when parent stops
  child.run(() => watch(/* ... */))
})
parent.stop() // stops child too

Scope Terpisah

Hantar true untuk mencipta scope terpisah yang TIDAK dikumpulkan oleh parent scope di sekelilingnya. Gunakannya apabila anda mahukan kawalan jangka hayat yang bebas.

const scope = effectScope(true) // detached
// must be stopped manually; parent stop will not reach it

Kes Penggunaan: Langganan Peringkat Pemalam

Penggunaan biasa ialah langganan reaktif pada peringkat pemalam atau aplikasi yang hidup di luar mana-mana komponen tunggal — contohnya menyegerakkan stor dengan localStorage. Kumpulkannya dalam scope yang anda hentikan apabila aplikasi ditamatkan.

const appScope = effectScope()
appScope.run(() => {
  watch(store.state, persistToLocalStorage, { deep: true })
})
// on app shutdown: appScope.stop()

Membina Sumber Boleh Lupus Semula

Komposabel boleh mencipta scope sendiri untuk menggabungkan kesan dalaman dan mendedahkan satu dispose. Pemanggil boleh membersihkan semuanya dengan satu panggilan.

export function useTracker() {
  const scope = effectScope()
  scope.run(() => {
    watch(/* ... */)
  })
  return { dispose: () => scope.stop() }
}

Scope dan Komponen

Di dalam setup komponen, Vue sudah menjalankan scope tersirat yang terikat pada kitar hayat komponen — sebab itulah pemerhati komponen dibersihkan secara automatik ketika dinyahlekang. effectScope memberikan keupayaan yang sama di luar komponen.

getCurrentScope dan onScopeDispose

Di dalam scope, anda boleh mendaftarkan pembersihan dengan onScopeDispose(fn), yang dijalankan apabila scope dihentikan — serupa dengan onUnmounted tetapi untuk mana-mana scope.

import { onScopeDispose } from "vue"

scope.run(() => {
  const id = setInterval(tick, 1000)
  onScopeDispose(() => clearInterval(id))
})

Semakan Pantas

Uji pemahaman anda tentang effectScope.

Jawab dalam pelajaran interaktif

Imbas Kembali

Anda telah mempelajari effectScope untuk kesan yang dikumpulkan:

effectScope() mencipta scope yang menangkap kesan yang dicipta di dalamnya.
scope.run(fn) mengumpulkan pemerhati atau nilai terhitung yang dicipta dalam fn.
scope.stop() melupuskan semuanya serentak; scope bersarang dihentikan bersama parentnya (gunakan true untuk scope terpisah).
onScopeDispose(fn) mendaftarkan pembersihan yang dijalankan apabila dihentikan.
Sesuai untuk komposabel dan langganan reaktif peringkat pemalam di luar komponen.

Percuma untuk bermula

Pelajari HTML dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 42
Pelajaran: 156

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “effectScope untuk Kesan Berkumpulan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Vue Academy, termasuk “effectScope untuk Kesan Berkumpulan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Vue Academy merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “effectScope untuk Kesan Berkumpulan”?

effectScope(), menjalankan pemerhati dan computed dalam skop, scope.stop() untuk pembersihan. Anda berlatih Vue Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Vue Academy?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Vue Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 4 daripada 4.

Berapa lamakah pelajaran “effectScope untuk Kesan Berkumpulan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

Kereaktifan Lanjutan: shallowRef dan triggerRef
Kilang Komposabel dan Komposabel Berparameter
Mesin Keadaan dengan XState dalam Vue
effectScope untuk Kesan Berkumpulan

← Kembali ke Vue Academy