Bases de Svelte
Introduction
Liaisons
Classes et styles
Svelte avancé
Réutiliser du contenu
Mouvements
Liaisons avancées
Advanced transitions
Context API
Special elements
<script module>
Next steps
Basic SvelteKit
Introduction
Routing
Loading data
Headers and cookies
Shared modules
API routes
$app/state
Errors and redirects
Advanced SvelteKit
Page options
Link options
Advanced routing
Advanced loading
Environment variables
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>