Eventos del ciclo de vida de Svelte

Cómo trabajar con eventos de ciclo de vida en Svelte

Cada componente de Svelte activa varios eventos de ciclo de vida a los que podemos conectarnos para ayudarnos a implementar la funcionalidad que tenemos en mente.

En particular, tenemos

• onMountSe activa después de que se renderiza el componente.
• onDestroySe dispara después de que se destruye el componente.
• beforeUpdatese dispara antes de que se actualice el DOM
• afterUpdatese activa después de que se actualiza el DOM

Podemos programar funciones para que se ejecuten cuando Svelte active estos eventos.

No tenemos acceso a ninguno de esos métodos de forma predeterminada, pero podemos importarlos desde el sveltepaquete:

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

Un escenario común onMountes obtener datos de otras fuentes.

A continuación se muestra un ejemplo de uso de onMount:

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

onDestroynos permite limpiar datos o detener cualquier operación que hayamos iniciado en la inicialización del componente, como temporizadores o funciones periódicas programadas usando setInterval.

Una cosa particular a tener en cuenta es que si devolvemos una función de onMount, que cumple la misma funcionalidad de onDestroy, se ejecuta cuando se destruye el componente:

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

A continuación se muestra un ejemplo práctico que establece una función periódica para que se ejecute al montarse y la elimina al destruirse:

script  import { onMount } from 'svelte'  onMount(async () = {    const interval = setInterval(() = {      console.log('hey, just checking!')    }, 1000)    return () = {      clearInterval(interval)    }  })/script

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase