# Svelte 5 个最佳实践 ## 快速参考主题 |何时使用 |参考 ---|---|--- **符文** | $状态、$派生、$effect、$props、$bindable、$inspect | [runes.md]() **片段** |替换插槽、{#snippet}、{@render} | [snippets.md]() **活动** | onclick 处理程序、回调属性、上下文 API | [events.md]() **打字稿** |道具输入、通用组件 | [typescript.md]() **迁移** | Svelte 4 到 5，商店到符文 | [migration.md]() **SvelteKit** |加载函数、表单操作、SSR、页面输入 | [sveltekit.md]() **性能** |通用反应性，避免过度反应性，流式 | [性能.md]() ## 基本模式 ### 反应状态 <脚本> 让计数 = $state(0); // 反应状态让双倍= $衍生（计数* 2）; // 计算值 ### 组件道具 <脚本> 让 { 名称, 计数 = 0 } = $props(); 让 { value = $bindable() } = $props(); // 双向绑定 ### 片段（替换插槽） <脚本> 让 { 孩子，标题 } = $props(); {@渲染头？.()} {@渲染孩子()} ### 事件处理程序 ### 回调道具（替换 createEventDispatcher） <脚本> 让 { onclick } = $props(); ## 常见错误 1. **在不使用`$state`的情况下使用`let`** \- 变量在没有`$state()`的情况下不会响应 2. **对派生值使用`$effect`** \- 使用`$衍生`代替 3. **使用`on:click`语法** \- 在 Svelte 5 中使用 `onclick` 4. **使用`createEventDispatcher`** \- 使用回调 props 代替 5. **使用``** \- 使用带有`{@render}`的片段 6. **忘记`$bindable()`** \- `bind:` 需要工作 7. **在SSR中设置模块级状态** \-导致交叉请求泄漏 8. **加载函数中的顺序等待** \- 使用 `Promise.all` 进行并行请求

Svelte5 最佳实践

包含技能