Déclarations réactives $:

En mode runes, les réactions aux mises à jour d’état sont gérées avec les runes $derived et $effect.

En mode legacy, toute déclaration à la racine (par ex. pas dans un bloc ou une fonction) peut être rendue réactive en la préfixant avec un label $:. Ces déclarations sont exécutées après tout autre code du <script> et avant le rendu du markup du composant, puis lorsque les valeurs dont elles dépendent changent.

<script>
	let a = 1;
	let b = 2;

	// ceci est une "déclaration réactive", et sera rejouée
	// lorsque `a`, `b` ou `sum` change
	$: console.log(`${a} + ${b} = ${sum}`);

	// ceci est une "assignatin réactive" — `sum` sera
	// recalculée lorsque `a` ou `b` change. Il n'est
	// pas nécessaire de déclarer `sum` séparément
	$: sum = a + b;
</script>

Les déclarations sont ordonnées topologiquement par leurs dépendences et leurs assignations : puisque la déclaration console.log dépend de sum, sum est calculée en premier même si elle apparaît plus loin dans le code.

Plusieurs déclarations peuvent être combinée en les mettant dans un bloc :

$: {
	// recalcule `total` lorsque `items` change
	total = 0;

	for (const const item: anyitem of items) {
		total += const item: anyitem.value;
	}
}

La partie à gauche d’une assignation réactive peut être un identifiant, ou une assignation de déstructuration :

$: ({ larry: anylarry, moe: anymoe, curly: anycurly } = stooges);

Comprendre les dépendances

Les dépendances d’une déclaration $: sont déterminées au moment de la compilation — il s’agit de toutes les variables référencées (mais pas assignées) dans la déclaration.

En d’autres termes, une déclaration comme celle-ci ne sera pas rejouée lorsque count change, car le compilateur ne peut pas “voir” la dépendance :

let let count: numbercount = 0;
let let double: () => numberdouble = () => let count: numbercount * 2;

$: doubled = let double: () => numberdouble();

De même, l’ordre topologique sera cassé si les dépendances sont référencées indirectement : z ne sera jamais mis à jour, car y n’est pas considérée comme ayant changé lorsque la mise à jour se produit. Déplacer $: z = y en-dessous de $: setY(x) permet de corriger le problème :

<script>
	let x = 0;
	let y = 0;

	$: z = y;
	$: setY(x);

	function setY(value) {
		y = value;
	}
</script>

Code uniquement pour le navigateur

Les déclarations réactives sont jouées lors du rendu côté serveur ainsi que dans le navigateur. Ceci signifie que tout code qui devrait être uniquement exécuté dans le navigateur devrait être placé dans un bloc if :

$: if (browser) {
	var document: Document
MDN Reference
document.Document.title: string
Contains the title of the document.
MDN Reference
title = title;
}