Back to Details

svelte5-best-practices

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Svelte 5 Best Practices

Svelte 5 最佳实践

Quick Reference

快速参考

TopicWhen to UseReference
Runes$state, $derived, $effect, $props, $bindable, $inspectrunes.md
SnippetsReplacing slots, {#snippet}, {@render}snippets.md
Eventsonclick handlers, callback props, context APIevents.md
TypeScriptProps typing, generic componentstypescript.md
MigrationSvelte 4 to 5, stores to runesmigration.md
SvelteKitLoad functions, form actions, SSR, page typingsveltekit.md
PerformanceUniversal reactivity, avoiding over-reactivity, streamingperformance.md
主题适用场景参考文档
Runes$state、$derived、$effect、$props、$bindable、$inspectrunes.md
代码片段替代Slots、{#snippet}、{@render}snippets.md
事件onclick 处理器、回调属性、Context APIevents.md
TypeScript属性类型定义、通用组件typescript.md
迁移Svelte 4 转 5、Stores 转 Runesmigration.md
SvelteKit加载函数、表单操作、SSR、页面类型定义sveltekit.md
性能优化通用响应式、避免过度响应式、流式处理performance.md

Essential Patterns

核心模式

Reactive State

响应式状态

svelte
<script>
  let count = $state(0);           // Reactive state
  let doubled = $derived(count * 2); // Computed value
</script>
svelte
<script>
  let count = $state(0);           // 响应式状态
  let doubled = $derived(count * 2); // 计算值
</script>

Component Props

组件属性

svelte
<script>
  let { name, count = 0 } = $props();
  let { value = $bindable() } = $props(); // Two-way binding
</script>
svelte
<script>
  let { name, count = 0 } = $props();
  let { value = $bindable() } = $props(); // 双向绑定
</script>

Snippets (replacing slots)

代码片段（替代Slots）

svelte
<script>
  let { children, header } = $props();
</script>

{@render header?.()}
{@render children()}
svelte
<script>
  let { children, header } = $props();
</script>

{@render header?.()}
{@render children()}

Event Handlers

事件处理器

svelte
<!-- Svelte 5: use onclick, not on:click -->
<button onclick={() => count++}>Click</button>
svelte
<!-- Svelte 5：使用 onclick，而非 on:click -->
<button onclick={() => count++}>点击</button>

Callback Props (replacing createEventDispatcher)

回调属性（替代createEventDispatcher）

svelte
<script>
  let { onclick } = $props();
</script>

<button onclick={() => onclick?.({ data })}>Click</button>
svelte
<script>
  let { onclick } = $props();
</script>

<button onclick={() => onclick?.({ data })}>点击</button>

Common Mistakes

常见错误

  1. Using 
    let
    without 
    $state
     - Variables are not reactive without 
    $state()
  2. Using 
    $effect
    for derived values     - Use 
    $derived
    instead
  3. Using 
    on:click
    syntax     - Use 
    onclick
    in Svelte 5
  4. Using 
    createEventDispatcher
     - Use callback props instead
  5. Using 
    <slot>
     - Use snippets with 
    {@render}
  6. Forgetting 
    $bindable()
     - Required for 
    bind:
    to work
  7. Setting module-level state in SSR - Causes cross-request leaks
  8. Sequential awaits in load functions - Use 
    Promise.all
    for parallel requests
  1. 使用
    let
    但未加
    $state
     - 变量如果不使用
    $state()
    则不具备响应式
  2. 使用
    $effect
    处理派生值     - 应改用
    $derived
  3. 使用
    on:click
    语法     - Svelte 5 中请使用
    onclick
  4. 使用
    createEventDispatcher
     - 应改用回调属性
  5. 使用
    <slot>
     - 应结合
    {@render}
    使用代码片段
  6. 忘记
    $bindable()
     - 要使
    bind:
    生效必须添加
  7. 在SSR中设置模块级状态 - 会导致跨请求数据泄露
  8. 在加载函数中使用顺序await - 应使用
    Promise.all
    并行请求