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
onMount
déclenché après le rendu du composantonDestroy
déclenché après la destruction du composantbeforeUpdate
déclenché avant la mise à jour du DOMafterUpdate
dé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 lesvelte
paquet:
<script>
import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte'
</script>
Un scénario courant pouronMount
consiste à 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>
onDestroy
nous 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> () => {
<span style="color:#a6e22e">clearInterval</span>(<span style="color:#a6e22e">interval</span>)
}
})
</script>
Téléchargez mon gratuitManuel de Svelte
Plus de tutoriels sveltes:
- Premiers pas avec Svelte - un court tutoriel
- Comment travailler avec des accessoires dans Svelte
- Comment importer des composants dans Svelte
- Comment exporter des fonctions et des variables à partir d'un composant Svelte
- Modèles Svelte: logique conditionnelle
- Comment renvoyer un composant Svelte à la demande
- Machines à sous Svelte
- Comment ajouter des commentaires dans les modèles Svelte
- Fixations Svelte
- Gestion des mises à jour d'état dans Svelte
- Déclarations réactives dans Svelte
- Événements du cycle de vie Svelte
- Modèles Svelte: boucles
- Résoudre les promesses dans les modèles Svelte
- Travailler avec des événements dans Svelte
- Gestion des états inter-composants dans Svelte
- Comment accéder à un paramètre d'URL dans Sapper en dehors du module de script
- Comment appliquer dynamiquement CSS dans Svelte
- Comment rediriger vers une URL dans Sapper
- Comment simuler une boucle for dans les modèles Svelte