كيفية العمل مع Lifecycle Events في Svelte
يطلق كل مكون في Svelte العديد من أحداث دورة الحياة التي يمكننا ربطها لتساعدنا في تنفيذ الوظيفة التي نضعها في الاعتبار.
على وجه الخصوص ، لدينا
onMount
أطلق بعد تقديم المكونonDestroy
أطلقت بعد تدمير المكونbeforeUpdate
أطلق قبل تحديث DOMafterUpdate
أطلق بعد تحديث DOM
يمكننا جدولة الوظائف لتحدث عندما يتم تشغيل هذه الأحداث بواسطة Svelte.
لا يمكننا الوصول إلى أي من هذه الطرق افتراضيًا ، ولكن يمكننا استيرادها من ملفsvelte
صفقة:
<script>
import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte'
</script>
سيناريو شائع لonMount
هو جلب البيانات من مصادر أخرى.
فيما يلي نموذج لاستخدامonMount
:
<script>
import { onMount } from 'svelte'
onMount(async () => {
//do something on mount
})
</script>
onDestroy
يسمح لنا بتنظيف البيانات أو إيقاف أي عملية ربما بدأناها عند تهيئة المكون ، مثل أجهزة ضبط الوقت أو الوظائف الدورية المجدولة باستخدامsetInterval
.
هناك شيء معين يجب ملاحظته وهو أننا إذا أعدنا دالة منonMount
، التي تخدم نفس وظائفonDestroy
- يتم تشغيله عند تدمير المكون:
<script>
import { onMount } from 'svelte'
onMount(async () => {
//do something on mount
return () => {
//do something on destroy
}
})
</script>
إليك مثال عملي يضبط وظيفة دورية للتشغيل على الحامل ، ويزيلها عند التدمير:
<script>
import { onMount } from 'svelte'
onMount(async () => {
const interval = setInterval(() => {
console.log(‘hey, just checking!’)
}, 1000)
<span style="color:#66d9ef">return</span> () => {
<span style="color:#a6e22e">clearInterval</span>(<span style="color:#a6e22e">interval</span>)
}
})
</script>
تحميل مجانيكتيب Svelte
المزيد من البرامج التعليمية svelte:
- الشروع في العمل مع Svelte - برنامج تعليمي قصير
- كيفية العمل مع الدعائم في Svelte
- كيفية استيراد المكونات في Svelte
- كيفية تصدير الوظائف والمتغيرات من مكون Svelte
- قوالب Svelte: المنطق الشرطي
- كيفية عرض مكون Svelte عند الطلب
- فتحات رشيقة
- كيفية إضافة التعليقات في قوالب Svelte
- Svelte Bindings
- معالجة تحديثات الحالة في Svelte
- جمل رد الفعل في Svelte
- أحداث دورة الحياة الرشيقة
- قوالب Svelte: الحلقات
- حل الوعود في قوالب Svelte
- العمل مع الأحداث في Svelte
- إدارة الحالة عبر المكونات في Svelte
- كيفية الوصول إلى معلمة URL في Sapper خارج وحدة البرنامج النصي
- كيفية تطبيق CSS ديناميكيًا في Svelte
- كيفية إعادة التوجيه إلى عنوان URL في Sapper
- كيفية محاكاة حلقة for في قوالب Svelte