Bases de Svelte
Introduction
Liaisons
Classes et styles
Svelte avancé
Réutiliser du contenu
Mouvements
Liaisons avancées
Transitions avancées
API de contexte
Éléments spéciaux
<script module>
Next steps
Bases de SvelteKit
Introduction
Routing
Chargement de données
En-têtes et cookies
Modules partagés
Formulaires
$app/state
Erreurs et redirections
SvelteKit avancé
Options de page
Options de lien
Routing avancé
Chargement avancé
Variables d’environnement
Conclusion
Comme nous l’avons vu dans l’exercice précédent, l’état réagit aux ré-assignations. Mais il réagit également aux mutations — nous appeleons cela la réactivité profonde.
Faites de numbers un tableau réactif :
App
let numbers = $state([1, 2, 3, 4]);Désormais, lorsque nous modifions le tableau...
App
function addNumber() {
numbers[numbers.length] = numbers.length + 1;
}... le composant se met à jour. Ou mieux encore, nous pouvons push dans le tableau :
App
function addNumber() {
numbers.push(numbers.length + 1);
}La réactivité profonde est implémenté grâce aux proxies, et les mutations sur le proxy n’affectent pas l’objet original.
Modifier cette page sur Github
précédent suivant
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
let numbers = [1, 2, 3, 4];
function addNumber() {// TODO implémenter
}
</script>
<p>{numbers.join(' + ')} = ...</p><button onclick={addNumber}>Ajouter un nombre
</button>