Escuchar cambios en propiedades exportadas en Svelte

En Svelte, es común necesitar escuchar los cambios en propiedades exportadas y ejecutar la función correspondiente. En este artículo, mostraremos cómo lograr esto utilizando declaraciones reactivas y funciones de ciclo de vida.

1. Usando la sintaxis reactiva $:

La declaración reactiva $: de Svelte es extremadamente poderosa y permite ejecutar código automáticamente cuando cambia una propiedad exportada. Por ejemplo, supongamos que tenemos una propiedad value exportada y queremos ejecutar una función cada vez que value cambie:

1
<script>
2
  export let value;
3

4
  // Declaración reactiva: este bloque se ejecuta cuando `value` cambia
5
  $: valueChanged(value);
6

7
  function valueChanged(newValue) {
8
    console.log('Valor cambiado a:', newValue);
9
  }
10
</script>
11

12
<p>{value}</p>

En este ejemplo, cada vez que value cambia, se llama a la función valueChanged, que registra el nuevo valor. Esta forma es intuitiva y fácil de usar, ideal para manejar escenarios simples de escucha de propiedades.

2. Usando el ciclo de vida beforeUpdate

Si necesitas realizar una lógica más compleja antes de que el componente se actualice, como desencadenar funciones solo si se cumplen ciertas condiciones, puedes usar el ciclo de vida beforeUpdate. Aquí hay un ejemplo:

1
<script>
2
  import { beforeUpdate } from 'svelte';
3

4
  export let value;
5

6
  let previousValue;
7

8
  beforeUpdate(() => {
9
    if (previousValue !== value) {
10
      valueChanged(value);
11
      previousValue = value;
12
    }
13
  });
14

15
  function valueChanged(newValue) {
16
    console.log('Valor cambiado a:', newValue);
17
  }
18
</script>
19

20
<p>{value}</p>

Aquí, beforeUpdate se ejecuta cuando el componente está a punto de actualizarse. Comparamos los valores nuevo y anterior para determinar si debemos llamar a la función valueChanged, lo cual es útil en situaciones donde se necesita un control más detallado.

¿Cuándo usar cada método?

La sintaxis reactiva $: es adecuada para la mayoría de los escenarios simples, ya que es concisa y rápida en respuesta; mientras que beforeUpdate es útil cuando se necesita un flujo de control más complejo.