Eventos esbeltos del ciclo de vida

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

Cada componente de Svelte activa varios eventos del ciclo de vida a los que podemos conectarnos y que nos ayudan a implementar la funcionalidad que tenemos en mente.

En particular, tenemos

  • onMountdisparado después de que se renderiza el componente
  • onDestroydisparado después de que se destruye el componente
  • beforeUpdatedisparado antes de que se actualice el DOM
  • afterUpdatedisparado después de que se actualice el DOM

Podemos programar funciones para que sucedan cuando Svelte active estos eventos.

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

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

Un escenario común paraonMountes buscar datos de otras fuentes.

Aquí hay un ejemplo de uso deonMount:

<script>
  import { onMount } from 'svelte'

onMount(async () => { //do something on mount }) </script>

onDestroynos permite limpiar datos o detener cualquier operación que pudiéramos haber comenzado en la inicialización del componente, como temporizadores o funciones periódicas programadas usandosetInterval.

Una cosa en particular a tener en cuenta es que si devolvemos una función deonMount, que tiene la misma funcionalidad deonDestroy- se ejecuta cuando se destruye el componente:

<script>
  import { onMount } from 'svelte'

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

Aquí hay un ejemplo práctico que establece una función periódica para que se ejecute en el montaje y la elimina al destruir:

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

Descarga mi gratisManual Svelte


Tutoriales más esbeltos: