0Pricing
Vue Academy · Ders

Gruplandırılmış Etkiler için effectScope

effectScope(), izleyicileri ve computed değerlerini bir scope içinde çalıştırma, temizleme için scope.stop().

Gruplandırılmış Etkiler için effectScope, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Temizleme Sorunu

Bir bileşenin kurulumu dışında oluşturulan izleyiciler ve hesaplanan değerler otomatik olarak sonlandırılmaz. Tek başına kullanılan birleştirilebilir işlevlerde veya eklenti düzeyindeki kodda efekt sızıntıları oluşabilir. effectScope, efektleri toplu temizleme için gruplandırarak bu sorunu çözer.

<code>effectScope</code> Ne Yapar

effectScope(), çalıştığı sırada oluşturulan reaktif efektleri (izleyiciler ve hesaplanan değerler) yakalar. Daha sonra scope'u durdurarak hepsini tek seferde sonlandırabilirsiniz.

import { effectScope } from "vue"

const scope = effectScope()

<code>run</code> ile Efektleri Toplama

scope.run(fn) çağrısını yapın ve izleyicilerinizle hesaplanan değerlerinizi fn içinde oluşturun. Bu çağrı sırasında oluşturulan her efekt scope'a kaydedilir.

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))
})

Scope'u Durdurma

scope.stop(), scope içinde oluşturulan her izleyiciyi ve hesaplanan değeri tek bir çağrıyla durdurur — her bir stop tutamacını ayrı ayrı izlemeniz gerekmez.

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

Bu Neden Önemlidir

Bir scope olmadan her izleyicinin stop tutamacını saklamanız ve bunları tek tek çağırmanız gerekir. Çok sayıda efekt olduğunda bu hataya açıktır. Bir scope, N temizleme işlemini tek işleme dönüştürür.

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

İç İçe Scope'lar

Scope'lar iç içe geçebilir. Bir parent içinde oluşturulan child scope, parent durdurulduğunda otomatik olarak durdurulur; böylece hiyerarşik temizlemeyi ücretsiz olarak elde edersiniz.

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

Bağımsız Scope'lar

Çevresindeki parent scope tarafından toplanmayan (NOT) bağımsız bir scope oluşturmak için true değerini geçiriniz. Bağımsız lifetime denetimi istediğinizde bunu kullanınız.

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

Kullanım Alanı: Eklenti Düzeyindeki Abonelikler

Yaygın bir kullanım, tek bir bileşenin dışında yaşayan eklenti veya uygulama düzeyindeki reaktif aboneliklerdir — örneğin bir store'u localStorage ile eşitlemek. Bunları, uygulama kapatılırken durduracağınız bir scope içinde gruplayınız.

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

Yeniden Kullanılabilir Temizleyici Oluşturma

Birleştirilebilir işlev, dahili efektleri bir araya getirmek ve tek bir dispose işlemi sunmak için kendi scope'unu oluşturabilir. Çağıranlar her şeyi tek bir çağrıyla temizleyebilir.

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

Scope'lar ve Bileşenler

Bir bileşenin setup işlevinin içinde Vue, bileşenin yaşam döngüsüne bağlı örtük bir scope'u zaten çalıştırır — bileşen kaldırıldığında izleyicilerin otomatik olarak temizlenmesinin nedeni budur. effectScope, bileşenlerin dışında da aynı gücü sağlar.

<code>getCurrentScope</code> ve <code>onScopeDispose</code>

Bir scope içinde, onScopeDispose(fn) ile scope durdurulduğunda çalışacak bir temizleme işlemi kaydedebilirsiniz — bu, herhangi bir scope için onUnmounted işlevine benzer.

import { onScopeDispose } from "vue"

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

Hızlı Kontrol

effectScope konusundaki anlayışınızı kontrol ediniz.

Özet

Gruplanmış efektler için effectScope kullanmayı öğrendiniz:

  • effectScope(), içinde oluşturulan efektleri yakalayan bir scope oluşturur.
  • scope.run(fn), fn içinde oluşturulan izleyicileri ve hesaplanan değerleri toplar.
  • scope.stop(), bunların hepsini tek seferde sonlandırır; iç içe scope'lar parent'larıyla birlikte durur (bağımsız olanlar için true kullanın).
  • onScopeDispose(fn), durdurulduğunda çalışacak bir temizleme işlemi kaydeder.
  • Bileşenlerin dışındaki birleştirilebilir işlevler ve eklenti düzeyindeki reaktif abonelikler için idealdir.

Sıkça Sorulan Sorular

“Gruplandırılmış Etkiler için effectScope” dersi ücretsiz mi?

Evet — “Gruplandırılmış Etkiler için effectScope” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Gruplandırılmış Etkiler için effectScope” dersinde ne öğreneceğim?

effectScope(), izleyicileri ve computed değerlerini bir scope içinde çalıştırma, temizleme için scope.stop(). Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“Gruplandırılmış Etkiler için effectScope” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. İleri Düzey Reaktivite: shallowRef ve triggerRef
  2. Composable Fabrikaları ve Parametreli Composable'lar
  3. Vue'da XState ile Durum Makineleri
  4. Gruplandırılmış Etkiler için effectScope
← Vue Academy Sayfasına Dön