Svelte 5 Runes：细粒度响应式原理解析

Svelte 5 Runes

显式响应式，同样适用于 .svelte 文件之外。

<script>
  let count = $state(0)
  let doubled = $derived(count * 2)
  let user = $state({ name: 'Alice', scores: [] })

  $effect(() => {
    document.title = 'Count: ' + count
    return () => { document.title = 'App' }
  })

  let { name = 'World', ...rest } = $props()
</script>

<button onclick={() => count++}>{count} x2 = {doubled}</button>

片段（替代插槽）

<script>
  let { title, children, footer } = $props()
</script>
<div class="card">
  <h2>{title}</h2>
  {@render children()}
  {#if footer}{@render footer()}{/if}
</div>

可移植响应式（.svelte.ts）

export class Counter {
  count = $state(0)
  doubled = $derived(this.count * 2)
  increment() { this.count++ }
}

-> 使用 JSON Viewer 分析存储数据。