SuperAPI AI 工具集

svelte5-best-practices

前端与建站

查看项目

更新于 10-15 21:37

技能介绍

用途:该技能用于在编写、审查或重构 Svelte 5 代码时提供现代最佳实践参考,覆盖组件开发与 SvelteKit 应用场景。

主要内容按主题分为八部分:Runes($state、$derived、$effect、$props、$bindable、$inspect);Snippets(替代 slots,使用 {#snippet} 与 {@render});事件(onclick 处理器、回调 props、context API);TypeScript(props 类型、泛型组件);迁移(Svelte 4 到 5、stores 到 runes);SvelteKit(load 函数、form actions、SSR、页面类型);性能(通用响应式、避免过度响应、流式处理)。

核心模式示例包括:用 let count = $state(0) 声明响应式状态,用 $derived(count * 2) 计算派生值;用 let { name, count = 0 } = $props() 接收组件 props,用 $bindable() 实现双向绑定;用 $props() 获取 children 与 header,再通过 {@render header?.()} 与 {@render children()} 渲染;事件使用 onclick 而非 on:click,并用回调 props 替代 createEventDispatcher。

常见错误提示:不使用 $state 的普通 let 变量不具备响应式;派生值应使用 $derived 而非 $effect;Svelte 5 应使用 onclick 而非 on:click;应使用回调 props 而非 createEventDispatcher;应使用 snippets 与 {@render} 而非 <slot>;使用 bind: 时必须配合 $bindable();SSR 中不应设置模块级状态以避免跨请求泄漏;load 函数中应使用 Promise.all 并行处理而非顺序 await。

限制:资料未提供安装命令、许可协议、版本要求、支持的编辑器或框架具体版本,这些信息暂未提供。