Signal-Based Reactivity
Minh họa signals, derived values và effects bằng vanilla JavaScript thuần.
Signal
Derived
Effect
Counter Signal
State nguồn — reactive signal
Reset về 0
0
step
1
Quick:
Two-Way Binding — Step Config
stepInput.value
step signal
synced in real-time
Derived Values
auto-computed$: nextValue = count + step
Next value (count + step)
1
$: prevValue = count - step
Prev value (count - step)
-1
$: isNegative = count < 0
isNegative
false
$: parity = count % 2 === 0 ? 'even' : 'odd'
Parity
even
Effect Log
// Runs whenever count or step changes
Effect init
count=0, step=1
Counter.svelte
Svelte 5 Runes
1 <script>
2 // Signal — $state rune
3 let count = $state(0);
4 let step = $state(1);
5
6 // Derived — $derived rune
7 const nextValue = $derived(count + step);
8 const isNegative = $derived(count < 0);
9
10 // Effect — $effect rune
11 $effect(() => {
12 document.title = `Counter: ${count}`;
13 });
14 </script>
15
16 <!-- Two-way binding: bind:value -->
17 <input bind:value={step} type="number" />
18
19 <button onclick={() => count += step}>
20 +
21 </button>
22
23 <p>Count: {count}</p>
24 <p>Next: {nextValue}</p>
25 <p>Negative: {isNegative}</p>
So sánh nhanh
| Concept | Svelte 5 | React |
|---|---|---|
| State | $state(0) | useState(0) |
| Derived | $derived(expr) | useMemo(fn, [deps]) |
| Effect | $effect(fn) | useEffect(fn, [deps]) |
| 2-way bind | bind:value | manual onChange |
| Re-render | Fine-grained | Full component |
| Deps | Auto-tracked | Manual array |
| Boilerplate | Low | High |
Reactive Data Flow
count (signal)
step (signal)
nextValue
isNegative
DOM update
title effect
Thay đổi signal nguồn tự động cập nhật toàn bộ chain — không cần manual trigger.
0
Updates
1
Effects run
0
|count|