## 何时使用使用 SvelteKit 或 Svelte 5 代码时使用此技能。 AI 代理接受过 Svelte 4 模式的培训，并经常使用存储、反应式声明和导出让生成过时的代码。该技能强制执行 Svelte 5 符文、加载函数和表单操作。 ## 关键规则 ### 1\.使用 Svelte 5 符文 - 切勿使用 Svelte 4 存储或反应式声明 **错误（代理这样做）：** <脚本> 从'svelte/store'导入{可写，派生}；让计数=可写(0); $: 加倍 = $count * 2; $: if (count > 5)alert('太高');

{$count}

**正确：** <脚本> 让计数 = $state(0); 让双倍= $衍生（计数* 2）; $效果(() => { if (count > 5)alert('太高'); });

{计数}

**为什么：** Svelte 5 符文（$state、$driven、$effect）取代了存储和 $: 语法。代理默认采用 Svelte 4 模式。 ### 2\.使用 $state 来表示反应状态 - 不要使用反应分配 **错误：** <脚本> 让计数= 0；计数 = 计数 + 1； **正确：** <脚本> 让计数 = $state(0); 计数 = 计数 + 1； **为什么：** 在 Svelte 5 中，反应性是通过 $state 选择加入的。普通的 let 不是反应式的。 ### 3\.使用 $衍生计算值 - 而不是 $: 反应式声明 **错误：** <脚本> 让firstName = $state('约翰'); 让lastName = $state('Doe'); $: fullName = `${firstName} ${lastName}`; **正确：** <脚本> 让firstName = $state('约翰'); 让lastName = $state('Doe'); 让 fullName = $衍生(`${firstName} ${lastName}`); **为什么：** $：是 Svelte 4。Svelte 5 使用 $driven 进行派生。 ### 4\.使用 $effect 表示副作用 - 而不是 $: 反应性语句 **错误：** <脚本> 让计数 = $state(0); $: if (count > 5) console.log('计数很高'); **正确：** <脚本> 让计数 = $state(0); $效果(() => { if (count > 5) console.log('计数很高'); }); **为什么：** $effect 在依赖项更改时运行。 $：不推荐使用副作用。 ### 5\.使用 $props() 作为组件 props - 不导出 let **错误：** <脚本> 导出让标题 = '默认'; 出口让计数；

{标题}

**正确：** <脚本> 让 { title = '默认', count } = $props();

{标题}

**为什么：** export let 是 Svelte 4。Svelte 5 使用 $props()。 ### 6\.使用 $bindable() 进行双向绑定道具 **错误：** <脚本> 让 { 值 } = $props(); <输入绑定：值= {值} /> **正确：** <脚本> 让 { value = $bindable() } = $props(); <输入绑定：值= {值} /> **为什么：** 默认情况下，道具是单向的。 $bindable() 启用来自父级的绑定：值。 ### 7\.使用加载函数（+page.server.ts）进行数据获取 - 而不是 onMount 获取 **错误：** <脚本> 从 'svelte' 导入 { onMount }；让数据= $state(null); onMount（异步（）=> { data = wait fetch('/api/users').then(r => r.json()); }); {#if 数据}{data.name}{/if} **正确：** // +page.server.ts 从“./$types”导入类型{PageServerLoad}；导出常量负载：PageServerLoad = async ({ fetch }) => ({ 数据：等待 fetch("/api/users").then((r) => r.json()), }); <脚本> 让 { 数据 } = $props(); {#if 数据}{data.name}{/if} **原因：** Load 在服务器上运行以进行 SSR，避免加载闪烁，并与 SvelteKit 路由集成。 ### 8\.使用表单操作进行突变 - 而不是 API 路由进行表单提交 **错误：** <表单上：提交= {异步（e）=> { e.preventDefault(); 等待 fetch('/api/login', { method: 'POST', body: new FormData(e.target) }); 转到（'/仪表板'）； }}> **正确：** // +page.server.ts 从“./$types”导入类型{动作}；导出常量操作 = { 默认值： async ({ request, cookies }) => { const data = 等待 request.formData(); // 验证、验证、设置 cookie 返回 { 类型：“重定向”，位置：“/仪表板” }; }, };

**原因：** 表单操作可实现渐进式增强，无需 JS 即可工作，并避免客户端获取样板文件。 ### 9\.使用 +layout.server.ts 共享布局数据 **错误：** <脚本> 让用户= $state(null); onMount(() => fetchUser().then(u => user = u)); **正确：** // +layout.server.ts 导出 const load = async ({ locals }) => ({ 用户：locals.user， }); **为什么：** 布局加载运行一次，数据可用于所有子页面。没有重复的提取。 ### 10\.对错误页面使用 +error.svelte **正确：** <脚本> 让 { 状态，消息 } = $props();

{状态}

{消息}

**为什么：** SvelteKit 使用 +error.svelte 来呈现加载/操作错误。在每个页面中使用它代替 try/catch。 ### 11\.使用+page.ts进行通用加载（服务器和客户端）当服务器和客户端都需要数据时（例如来自 $app/stores 或浏览器 API），请将逻辑放入 +page.ts 中。当数据仅用于服务器时，请使用 +page.server.ts。 ### 12\.使用 hooks.server.ts 作为中间件（身份验证、重定向） **正确：** // 钩子.server.ts 导出 const 句柄 = async ({ 事件, 解析 }) => { event.locals.user = 等待 getUser(event); if (!event.locals.user && event.url.pathname.startsWith("/dashboard")) { 返回重定向（302，“/登录”）； } 返回解析（事件）； }; **为什么：** 在每个请求之前处理运行。用于身份验证、重定向和设置本地变量。 ### 13\.谨慎使用 $app/stores - 更喜欢加载函数数据更喜欢通过 load props 传递数据。仅当需要客户端路由状态时才使用 $page、$navigating 等。 ### 14\.使用片段块作为可重用的模板块 (Svelte 5) **错误：** <脚本> 导出让槽； {#if slot.header}{/if} **正确：** <脚本> 让 { header = @render(() => {}) } = $props(); {@渲染头()} **为什么：** Svelte 5 snippets 用 @render 和 snippet props 取代了基于 slot 的组合。 ## 模式 * 页面数据：+page.server.ts加载返回对象，+page.svelte通过$props()接收`data` * 带有增强功能的表单：来自 `$app/forms` 的 `method="POST"` 和 `use:enhance` * Streaming：从加载中返回承诺，无需等待；在模板中使用“{#await data.promise}” * TypeScript：使用 `import type { PageServerLoad, PageProps } from './$types'` ## 反模式 * 不要使用可写、可读、派生、从 svelte/store 获取 * 不要使用 $: 进行推导或产生副作用 * 不要使用 export let 作为 props * 当SSR需要数据时，不要在onMount中获取 * 不要仅仅为了表单 POST 处理而创建 +server.ts API 路由 * 不要将bind:value与prop一起使用，除非prop是$bindable()

Sveltekit 最佳实践

包含技能