Vue Academy · درس

‏effectScope للتأثيرات المجمّعة

‏effectScope()، وتشغيل Watchers وComputed ضمن نطاق، واستخدام scope.stop() للتنظيف

الدرس 4 من 413 خطوة

‏effectScope للتأثيرات المجمّعة درس مجاني في Vue Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Vue Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Vue Academy 4 دروس في المجموع.

مشكلة التنظيف

لا تُزال أدوات المراقبة والقيم المحسوبة التي تُنشأ خارج setup الخاص بمكوّن تلقائيًا. وقد تتسبب دوال composable المستخدمة بشكل مستقل، أو الشيفرة على مستوى الإضافات، في تسريب التأثيرات. يحل effectScope هذه المشكلة بتجميع التأثيرات لإزالتها جميعًا معًا.

ما الذي يفعله effectScope؟

ينشئ effectScope() نطاقًا يلتقط أي تأثيرات تفاعلية (مثل أدوات المراقبة والقيم المحسوبة) تُنشأ أثناء تشغيله. وبعد ذلك توقفون النطاق لإزالتها كلها دفعة واحدة.

import { effectScope } from "vue"

const scope = effectScope()

جمع التأثيرات باستخدام run

استدعوا scope.run(fn) وأنشئوا أدوات المراقبة والقيم المحسوبة داخل fn. يُسجَّل كل تأثير يُنشأ أثناء ذلك الاستدعاء في النطاق.

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.stop() كل أداة مراقبة وكل قيمة محسوبة أُنشئت داخل النطاق باستدعاء واحد، فلا حاجة إلى تتبع كل مقبض stop على حدة.

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

لماذا يهم ذلك؟

من دون نطاق، يجب التقاط مقبض الإيقاف لكل أداة مراقبة واستدعاء المقابض واحدًا تلو الآخر. ومع كثرة التأثيرات، يكون هذا عرضة للأخطاء. يحوّل النطاق N من عمليات التنظيف إلى عملية واحدة.

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

النطاقات المتداخلة

يمكن تداخل النطاقات. فعند إنشاء نطاق فرعي داخل نطاق أب، يُوقَف النطاق الفرعي تلقائيًا عند إيقاف النطاق الأب، وبذلك تحصلون على تنظيف هرمي دون جهد إضافي.

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

النطاقات المنفصلة

مرّروا true لإنشاء نطاق منفصل لا يجمعه نطاق أب محيط به. استخدموه عندما تريدون التحكم في دورة حياته بشكل مستقل.

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

حالة استخدام: الاشتراكات على مستوى الإضافة

من الاستخدامات الشائعة الاشتراكات التفاعلية على مستوى الإضافة أو التطبيق، التي تعيش خارج أي مكوّن واحد، مثل مزامنة مخزن مع localStorage. اجمعوها في نطاق توقفونه عند إنهاء التطبيق.

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

بناء كائن قابل لإزالة الموارد وإعادة الاستخدام

يمكن لدالة composable إنشاء نطاق خاص بها لتجميع التأثيرات الداخلية، ثم إتاحة دالة dispose واحدة. وبذلك ينظف المستدعون كل شيء باستدعاء واحد.

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

النطاقات والمكوّنات

داخل setup الخاص بمكوّن، يشغّل Vue بالفعل نطاقًا ضمنيًا مرتبطًا بدورة حياة المكوّن، ولهذا تُنظَّف أدوات المراقبة الخاصة بالمكوّن تلقائيًا عند إلغاء تركيبه. يمنحكم effectScope القدرة نفسها خارج المكوّنات.

getCurrentScope و onScopeDispose

يمكنكم داخل النطاق تسجيل التنظيف باستخدام onScopeDispose(fn)، الذي يُنفَّذ عند إيقاف النطاق، وهو شبيه بـ onUnmounted لكنه يعمل مع أي نطاق.

import { onScopeDispose } from "vue"

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

تحقق سريع

تحققوا من فهمكم لـ effectScope.

أجب عليها في الدرس التفاعلي

مراجعة

لقد تعلمتم استخدام effectScope لتجميع التأثيرات:

ينشئ effectScope() نطاقًا يلتقط التأثيرات التي تُنشأ داخله.
يجمع scope.run(fn) أدوات المراقبة والقيم المحسوبة التي تُنشأ في fn.
يزيل scope.stop() هذه التأثيرات كلها دفعة واحدة؛ وتتوقف النطاقات المتداخلة مع نطاقاتها الأم، ويمكن استخدام true للنطاقات المنفصلة.
يسجّل onScopeDispose(fn) عملية تنظيف تُنفَّذ عند الإيقاف.
يُعد ذلك مثاليًا لدوال composable والاشتراكات التفاعلية على مستوى الإضافات خارج المكوّنات.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 42
الدروس: 156

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «‏effectScope للتأثيرات المجمّعة» مجاني؟

نعم — نص درس «‏effectScope للتأثيرات المجمّعة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Vue Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Vue Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏effectScope للتأثيرات المجمّعة»؟

‏effectScope()، وتشغيل Watchers وComputed ضمن نطاق، واستخدام scope.stop() للتنظيف تتمرن على Vue Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Vue Academy؟

لا تُشترط خبرة سابقة. Vue Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.

كم من الوقت يستغرق درس «‏effectScope للتأثيرات المجمّعة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Vue Academy هذا؟

نعم. كل درس في Vue Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

التفاعلية المتقدمة: shallowRef وtriggerRef
مصانع Composables وComposables ذات المعلمات
آلات الحالة باستخدام XState في Vue
‏effectScope للتأثيرات المجمّعة

← العودة إلى Vue Academy