$derived.by pour les dérivations complexes
Calculez des valeurs dérivées avec une logique arbitraire en utilisant la forme par fonction de rappel de $derived.
$derived.by pour les dérivations complexes est une leçon Sveltejs Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Sveltejs Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Sveltejs Academy comprend 4 leçons au total.
Dérivations à plusieurs instructions
Pour les valeurs dérivées qui nécessitent plusieurs expressions, utilisez la forme avec fonction de rappel.
let result = $derived.by(() => {
if (count > 10) return "high";
if (count > 5) return "medium";
return "low";
});Même réactivité
La fonction de rappel suit les dépendances de la même manière qu’un $derived à expression unique.
Meilleure lisibilité
Pour une logique complexe, la forme .by est plus claire que de tout regrouper dans une seule expression.
Boucles et embranchements
Vous pouvez utiliser des boucles for, des conditions if-else et let dans la fonction de rappel.
Fonctions pures
Comme $derived, .by doit être pur. Aucun effet secondaire n’est autorisé.
Mémorisation
Le résultat est mis en cache jusqu’à ce que les dépendances changent.
Éviter les opérations coûteuses
Si le calcul est coûteux, envisagez de le mettre en cache en dehors de la dérivation.
Inférence typée
TypeScript déduit le type de retour à partir de la fonction de rappel.
Combiner avec $effect
Utilisez $derived.by pour les valeurs calculées et $effect pour les effets secondaires. Gardez-les séparés.
Migration
Convertissez les blocs $: imbriqués en un seul $derived.by pour obtenir un code plus clair.
Dans la pratique
Utile pour filtrer et trier des listes, calculer des indicateurs agrégés et appliquer un formatage conditionnel.
Vérification rapide
Quand utilisez-vous $derived.by ?
Récapitulatif
Utilisez $derived.by(() => ...) pour les valeurs calculées en plusieurs étapes avec des embranchements ou des boucles.
Questions Fréquemment Posées
La leçon « $derived.by pour les dérivations complexes » est-elle gratuite ?
Oui — le texte complet de « $derived.by pour les dérivations complexes » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Sveltejs Academy, passe à CoddyKit PRO. Le cours Sveltejs Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « $derived.by pour les dérivations complexes » ?
Calculez des valeurs dérivées avec une logique arbitraire en utilisant la forme par fonction de rappel de $derived. Tu pratiques Sveltejs Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer Sveltejs Academy ?
Aucune expérience préalable n'est requise. Sveltejs Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.
Combien de temps prend la leçon « $derived.by pour les dérivations complexes » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon Sveltejs Academy ?
Oui. Chaque leçon Sveltejs Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- $state.raw pour un état non réactif
- $derived.by pour les dérivations complexes
- $effect.root pour un nettoyage manuel
- Migrer de Svelte 4 vers 5