mcpField
S
svelte5-best-practices

svelte5-best-practices

github.com/midudev开发7.0k68 次安装1 周前更新
代码仓库

关于 svelte5-best-practices

为 Svelte 5 开发者整理的实践指南，提供响应式状态、组件属性、片段和事件处理模式，并涵盖 SvelteKit、性能与迁移注意事项。

主要功能

  1. 01Runes 响应式状态模式
  2. 02组件属性与双向绑定
  3. 03Snippets 和渲染模式
  4. 04事件处理与回调属性
  5. 05SvelteKit、性能及迁移参考

适用场景

  1. 01实现 Svelte 5 响应式状态
  2. 02编写组件属性和事件回调
  3. 03将 Svelte 4 代码迁移到 5
  4. 04检查 SvelteKit 加载与性能模式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/midudev/autoskills --skill svelte5-best-practices

安装后在 Claude Code 中输入/svelte5-best-practices确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/
events.md
migration.md
performance.md
runes.md
snippets.md
sveltekit.md
typescript.md

详细介绍

Svelte 5 最佳实践

快速参考

主题使用时机参考
Runes$state、$derived、$effect、$props、$bindable、$inspectrunes.md
Snippets替代插槽、{#snippet}、{@render}snippets.md
事件onclick 处理程序、回调属性、上下文 APIevents.md
TypeScript属性类型、泛型组件typescript.md
迁移从 Svelte 4 迁移到 5、从 stores 迁移到 runesmigration.md
SvelteKitLoad 函数、表单操作、SSR、页面类型sveltekit.md
性能通用响应性、避免过度响应、流式传输performance.md

核心模式

响应式状态
<script>
  let count = $state(0);           // Reactive state
  let doubled = $derived(count * 2); // Computed value
</script>
组件属性
<script>
  let { name, count = 0 } = $props();
  let { value = $bindable() } = $props(); // Two-way binding
</script>
Snippets（替代插槽）
<script>
  let { children, header } = $props();
</script>

{@render header?.()}
{@render children()}
事件处理程序

<button onclick={() => count++}>Click</button>
回调属性（替代 createEventDispatcher）
<script>
  let { onclick } = $props();
</script>

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

常见错误

  1. 使用 let 却不使用 $state - 不使用 $state()，变量就不会具有响应性
  2. 使用 $effect 处理派生值 - 应改用 $derived
  3. 使用 on:click 语法 - 在 Svelte 5 中应使用 onclick
  4. 使用 createEventDispatcher - 应改用回调属性
  5. 使用 <slot> - 应使用 snippets 和 {@render}
  6. 忘记 $bindable() - bind: 正常工作所必需
  7. 在 SSR 中设置模块级状态 - 会导致跨请求数据泄漏
  8. 在 load 函数中顺序 await - 使用 Promise.all 并行发起请求

评论

支持 Markdown