Événements du cycle de vie Svelte

Comment travailler avec les événements du cycle de vie dans Svelte

Chaque composant de Svelte déclenche plusieurs événements de cycle de vie auxquels nous pouvons nous connecter et qui nous aident à implémenter la fonctionnalité que nous avons à l'esprit.

En particulier, nous avons

onMountdéclenché après le rendu du composant
onDestroydéclenché après la destruction du composant
beforeUpdatedéclenché avant la mise à jour du DOM
afterUpdatedéclenché après la mise à jour du DOM

Nous pouvons programmer des fonctions pour qu'elles se produisent lorsque ces événements sont déclenchés par Svelte.

Nous n'avons accès à aucune de ces méthodes par défaut, mais nous pouvons les importer depuis lesveltepaquet:

<script>
  import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte'
</script>

Un scénario courant pouronMountconsiste à récupérer des données à partir d'autres sources.

Voici un exemple d'utilisation deonMount:

<script>
  import { onMount } from 'svelte'
onMount(async () => {
//do something on mount
  })
</script>

onDestroynous permet de nettoyer les données ou d'arrêter toute opération que nous aurions pu démarrer lors de l'initialisation du composant, comme les minuteries ou les fonctions périodiques planifiées à l'aide desetInterval.

Une chose particulière à noter est que si nous retournons une fonction deonMount, qui sert la même fonctionnalité deonDestroy- il est exécuté lorsque le composant est détruit:

<script>
  import { onMount } from 'svelte'
onMount(async () => {
//do something on mount

return () => {
//do something on destroy
    }
})
</script>

Voici un exemple pratique qui définit une fonction périodique à exécuter lors du montage et la supprime lors de la destruction:

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

Téléchargez mon gratuitManuel de Svelte

Événements du cycle de vie Svelte

Comment travailler avec les événements du cycle de vie dans Svelte

Plus de tutoriels sveltes: