Reactivity with Runes

Runes: reactivity แบบชัดเจน

rune คือสัญญาณของ compiler — คำที่ขึ้นต้นด้วย $ และหน้าตาเหมือน function — ที่บอก Svelte ว่า “ค่านี้เป็น reactive” runes ไม่ได้ถูก import และไม่ได้ถูกเรียกตอน runtime เหมือน function ปกติ compiler จะรู้จัก rune เหล่านี้แล้ว generate กลไก reactivity ขึ้นมารอบ ๆ

<script>
  let count = $state(0);        // reactive state
  let double = $derived(count * 2);  // recomputed when count changes
  $effect(() => console.log(double)); // runs when double changes
</script>

model ทั้งหมดคือ: mark ค่าที่เป็น reactive ด้วย runes แล้ว compiler จะต่อ dependency graph ให้เอง คุณไม่ต้องเขียน dependency array หรือ code สำหรับ subscribe เลย — compiler เห็นว่า double อ่าน count และ effect อ่าน double แล้วเชื่อมให้

การเปลี่ยนจาก Svelte 4 มา Svelte 5

runes คือการเปลี่ยนแปลงหลักใน Svelte 5 และแทนที่ กลไกของ Svelte 4 สามอย่างด้วยระบบเดียวที่สอดคล้องกัน:

Svelte 4	Svelte 5
`let count = 0` (top-level `let` เป็น reactive โดยปริยาย)	`let count = $state(0)`
`$: double = count * 2` (reactive statement)	`let double = $derived(count * 2)`
`$: { … }` (reactive block, side effect)	`$effect(() => { … })`
`export let name` (props)	`let { name } = $props()`

ทำไมถึงเปลี่ยน? ใน Svelte 4 reactivity เป็นแบบ implicit — let ธรรมดาที่ด้านบนของ component เป็น reactive แต่ code เดียวกันในไฟล์ .js กลับไม่เป็น และ $: ก็มี edge case ที่งง runes ทำให้ reactivity ชัดเจนและ portable: $state มีความหมายเหมือนกันทั้งใน component และใน .svelte.js module และกฎก็เหมือนกันหมด

flowchart LR
  state["$state คือ reactive source"] --> derived["$derived recompute จาก sources"]
  derived --> effect["$effect ทำงานเมื่อค่าที่อ่านเปลี่ยน"]
  props["$props คือ input จาก parent"] --> derived

runes mark reactivity แล้ว compiler ต่อ graph

โมดูลนี้ครอบคลุมอะไร

$state — reactive state, deep โดย default สำหรับ object และ array
$derived — ค่าที่ cache ไว้ คำนวณจากค่า reactive อื่น
$effect — sync กับโลกภายนอก (และทำไมส่วนใหญ่คุณไม่ควรใช้)
$props / $bindable — input ของ component และ two-way binding
Advanced — $inspect, untrack และ shared reactive state ใน .svelte.js module