أحداث دورة الحياة الرشيقة

كيفية العمل مع Lifecycle Events في Svelte

يطلق كل مكون في Svelte العديد من أحداث دورة الحياة التي يمكننا ربطها لتساعدنا في تنفيذ الوظيفة التي نضعها في الاعتبار.

على وجه الخصوص ، لدينا

onMountأطلق بعد تقديم المكون
onDestroyأطلقت بعد تدمير المكون
beforeUpdateأطلق قبل تحديث DOM
afterUpdateأطلق بعد تحديث 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> () =&gt; {
  <span style="color:#a6e22e">clearInterval</span>(<span style="color:#a6e22e">interval</span>)
}
})
</script>

تحميل مجانيكتيب Svelte

أحداث دورة الحياة الرشيقة

كيفية العمل مع Lifecycle Events في Svelte

المزيد من البرامج التعليمية svelte: