Svelte 5 Runes 新特性详解

Svelte 5 引入了全新的响应式原语——Runes，彻底改变了状态管理的方式。让我们一起来了解这个革命性的变化。

什么是 Runes？

Runes 是以 $ 符号开头的特殊函数，用于告诉 Svelte 编译器某个变量是响应式的。

核心 Runes

$state — 响应式状态

<script>
  let count = $state(0)
  let user = $state({ name: '栗辉', role: 'admin' })
</script>

<button onclick={() => count++}>
  点击了 {count} 次
</button>

$derived — 派生状态

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

<p>{count} × 2 = {doubled}</p>

$effect — 副作用

<script>
  let count = $state(0)

  $effect(() => {
    console.log(`count 变为 ${count}`)
    document.title = `计数器: ${count}`
  })
</script>

$props — 组件属性

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

<h1>{title}</h1>
<p>计数: {count}</p>

与 Svelte 4 的对比

特性	Svelte 4	Svelte 5
状态声明	let count = 0	let count = $state(0)
派生值	$: doubled = count * 2	let doubled = $derived(count * 2)
副作用	$: { ... }	$effect(() => { ... })
Props	export let title	let { title } = $props()

迁移建议

1. 使用官方迁移工具：npx sv migrate
2. 逐步迁移，Svelte 5 兼容旧语法
3. 优先迁移状态管理部分
4. 测试每个组件的响应式行为

总结

Runes 让 Svelte 的响应式系统更加显式和灵活。虽然需要一定的学习成本，但带来的好处是值得的。==高亮文字kk==