SuperAPI AI 工具集

svelte5-best-practices

前端与建站

查看项目

更新于 10-16 06:48

技能介绍

用途:该技能面向 Svelte 5 的编写、审查与重构,提供 runes、snippets、事件、TypeScript、迁移、SvelteKit 与性能等主题的参考。

主要能力:覆盖 $state、$derived、$effect、$props、$bindable、$inspect 等 runes;用 {#snippet} 与 {@render} 替代 slot;用 onclick 与回调 props 替代 on:click 和 createEventDispatcher;props 类型与泛型组件;Svelte 4 到 5 及 stores 到 runes 的迁移;load 函数、form actions、SSR 与页面类型;通用响应式、避免过度响应与流式渲染等性能话题。

必要用法:按主题查阅对应参考文件(runes.md、snippets.md、events.md、typescript.md、migration.md、sveltekit.md、performance.md)。示例:let count = $state(0); let doubled = $derived(count * 2); let { name, count = 0 } = $props(); let { value = $bindable() } = $props(); 事件使用 <button onclick={() => count++}>Click</button>。

常见错误:变量不加 $state 不会响应;用 $effect 计算派生值应改用 $derived;仍用 on:click 或 createEventDispatcher;仍用 <slot>;忘记 $bindable() 导致 bind: 失效;SSR 中设置模块级状态造成跨请求泄漏;load 函数中顺序 await 应改用 Promise.all 并行。

适用场景:Svelte 5 组件开发、代码审查、从 Svelte 4 迁移、SvelteKit 项目实践。限制:资料未提供安装命令、收费、价格与平台信息。