Vue Academy · Pelajaran

effectScope untuk Effect yang Dikelompokkan

effectScope(), menjalankan watcher dan computed dalam scope, serta scope.stop() untuk pembersihan.

effectScope untuk Effect yang Dikelompokkan adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Masalah Pembersihan

Pengamat dan nilai terhitung yang dibuat di luar setup komponen tidak dibersihkan secara otomatis. Dalam komposabel yang digunakan secara mandiri atau kode tingkat plugin, Anda dapat membocorkan efek. effectScope mengatasinya dengan mengelompokkan efek agar dapat dibersihkan bersama-sama.

Fungsi effectScope

effectScope() membuat scope yang menangkap efek reaktif apa pun (pengamat, nilai terhitung) yang dibuat selama scope tersebut berjalan. Setelah itu, Anda dapat menghentikan scope untuk membersihkan semuanya sekaligus.

import { effectScope } from "vue"

const scope = effectScope()

Mengumpulkan Efek dengan run

Panggil scope.run(fn), lalu buat pengamat dan nilai terhitung di dalam fn. Setiap efek yang dibuat selama pemanggilan tersebut didaftarkan ke 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 pengamat dan nilai terhitung yang dibuat di dalam scope melalui satu pemanggilan — Anda tidak perlu melacak setiap pegangan stop secara terpisah.

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

Mengapa Ini Penting

Tanpa scope, Anda harus menyimpan setiap pegangan penghentian pengamat dan memanggilnya satu per satu. Dengan banyak efek, cara ini rentan terhadap kesalahan. Scope mengubah N pembersihan menjadi satu.

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

Scope Bertingkat

Scope dapat bertingkat. Scope child yang dibuat di dalam scope parent akan dihentikan secara otomatis ketika scope parent berhenti, sehingga Anda mendapatkan pembersihan hierarkis secara gratis.

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

Scope Terpisah

Berikan true untuk membuat scope yang terpisah dan tidak dikumpulkan oleh scope parent di sekitarnya. Gunakan ini ketika Anda menginginkan kontrol masa hidup yang mandiri.

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

Kasus Penggunaan: Langganan Tingkat Plugin

Penggunaan yang umum adalah langganan reaktif tingkat plugin atau aplikasi yang hidup di luar satu komponen tertentu — misalnya menyinkronkan penyimpanan dengan localStorage. Kelompokkan semuanya dalam scope yang Anda hentikan saat aplikasi dihentikan.

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

Membangun Objek yang Dapat Dibersihkan

Komposabel dapat membuat scope sendiri untuk menggabungkan efek internal dan menyediakan satu dispose. Pemanggil dapat membersihkan semuanya dengan satu pemanggilan.

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

Scope dan Komponen

Di dalam setup komponen, Vue sudah menjalankan scope implisit yang terikat pada siklus hidup komponen — itulah sebabnya pengamat komponen dibersihkan otomatis saat komponen dilepas. effectScope memberi Anda kemampuan yang sama di luar komponen.

getCurrentScope dan onScopeDispose

Di dalam scope, Anda dapat mendaftarkan pembersihan dengan onScopeDispose(fn), yang dijalankan ketika scope berhenti — serupa dengan onUnmounted, tetapi untuk scope apa pun.

import { onScopeDispose } from "vue"

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

Pemeriksaan Singkat

Periksa pemahaman Anda tentang effectScope.

Ringkasan

Anda telah mempelajari effectScope untuk mengelompokkan efek:

effectScope() membuat scope yang menangkap efek yang dibuat di dalamnya.
scope.run(fn) mengumpulkan pengamat dan nilai terhitung yang dibuat dalam fn.
scope.stop() membersihkan semuanya sekaligus; scope bertingkat berhenti bersama parent-nya (gunakan true untuk scope terpisah).
onScopeDispose(fn) mendaftarkan pembersihan yang dijalankan saat scope berhenti.
Ideal untuk komposabel dan langganan reaktif tingkat plugin di luar komponen.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “effectScope untuk Effect yang Dikelompokkan” gratis?

Ya — teks lengkap “effectScope untuk Effect yang Dikelompokkan” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “effectScope untuk Effect yang Dikelompokkan”?

effectScope(), menjalankan watcher dan computed dalam scope, serta scope.stop() untuk pembersihan. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.

Berapa lama pelajaran “effectScope untuk Effect yang Dikelompokkan” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

Reaktivitas Lanjutan: shallowRef dan triggerRef
Factory Composable dan Composable Berparameter
State Machine dengan XState di Vue
effectScope untuk Effect yang Dikelompokkan

← Kembali ke Vue Academy