Reprise : graphe de calculs
Un calculateur de prix dont chaque ligne est un computed qui lit le précédent — subtotal → discount → tax → total. Tout le graphe dérivé est re-dérivé en direct sur le client à partir des valeurs sérialisées, sans jamais exécuter le composant.
Astuce
Changez la quantité ou cochez « Member » : le sous-total, la remise, la taxe et le total se recalculent en cascade. Les computed dépendent les uns des autres (computed-of-computed) et reprennent paresseusement — l'ordre n'a pas d'importance.
Démo en direct
Widget — $19 each2
Subtotal$38.00
Discount−$0.00
Tax (8%)$3.04
Total$41.04
"use resumable";
import { signal, computed } from "@bext-stack/framework/signals";
const qty = signal(2);
const member = signal(false);
// a multi-level derived graph — each computed reads the previous:
const subtotal = computed(() => qty.value * 19);
const discount = computed(() => member.value ? subtotal.value * 0.1 : 0);
const tax = computed(() => (subtotal.value - discount.value) * 0.08);
const total = computed(() => subtotal.value - discount.value + tax.value);
// On resume the runtime re-derives every computed lazily:
// scope[id] = computed(() => __ccomp[id](scope))
// so total recomputes through tax → discount → subtotal automatically.