Svelte 5 Runes 完全指南

Svelte 5 引入了 Runes — 一套显式的响应式原语，彻底改变了我们编写 Svelte 组件的方式。

$state — 响应式状态

<script>
 let count = $state(0);

 function increment() {
  count++;
 }
</script>

<button onclick={increment}>
 Clicked {count} times
</button>

$derived — 计算值

<script>
 let count = $state(0);
 let doubled = $derived(count * 2);
 let quadrupled = $derived(doubled * 2);
</script>

$effect — 副作用

<script>
 let count = $state(0);

 $effect(() => {
  console.log('count changed:', count);
 });
</script>

$props — 组件属性

<script>
 let { name, count = 0 } = $props();
</script>

迁移建议

Svelte 4	Svelte 5
let count = 0	let count = $state(0)
$: doubled = count * 2	let doubled = $derived(count * 2)
$: console.log(count)	$effect(() => { console.log(count); })
export let prop	let { prop } = $props()
<slot />	{@render children()}

Runes 让响应式更加显式和可预测，是 Svelte 生态系统的一次重大进化。