svelte

Svelte / SvelteKit

本技能涵盖 Svelte 和 SvelteKit 开发，深入了解 SSR、SSG 和现代 Web 模式，包括 Svelte 5 的 runes 系统及其与旧版 Svelte 4 响应性的区别。

核心原则

• 编写简洁、技术准确的组件和 SvelteKit 示例
• 强调 SSR/SSG 能力与性能优化
• 使用符合规范命名约定的 TypeScript
• 通过服务端渲染，优先减少客户端 JavaScript
• 遵循函数式和声明式编程模式

Svelte 5 Runes

Svelte 5 引入了 runes——编译器级原语，可显式表达响应性，取代 Svelte 4 隐式的 let/$: 响应性。

• 使用 $state 管理响应式状态（取代需要响应性的普通 let 绑定）
• 使用 $derived 管理计算值（取代 $: computed = ...）
• 使用 $effect 处理副作用（取代 $: { ... } 代码块）
• 使用 $props 定义组件属性（取代 export let prop）
• 使用 $bindable 定义支持双向绑定的属性（取代导出属性对 bind: 的隐式支持）
• 在开发期间使用 $inspect 记录响应式值的变化
• Runes 是编译器语法，而非导入项——切勿 import { $state } from 'svelte'。仅导入仍需导入的实用工具，例如 tick、untrack、mount 或 unmount。

Svelte 4 与 Svelte 5

Svelte 4（旧版响应性）：

<script>
  let count = 0;
  $: double = count * 2;
  $: {
    if (count > 10) alert('Too high!');
  }
</script>
<button on:click={() => count++}>{count} / {double}</button>

Svelte 5（runes）：

<script>
  let count = $state(0);
  let double = $derived(count * 2);

  $effect(() => {
    if (count > 10) alert('Too high!');
  });
</script>
<button onclick={() => count++}>{count} / {double}</button>

编写或审查组件时应遵循的主要区别：

1. 显式表达响应性——$state() 标记响应式变量，$derived() 取代用于计算值的 $:，$effect() 取代用于副作用的 $: {} 代码块。
2. 统一事件处理方式——Svelte 5 将事件处理器视为普通 HTML 属性（onclick={handler}），而非 Svelte 特有的指令（on:click={handler}）。不再支持 |preventDefault 等事件修饰符；应直接调用 e.preventDefault()，例如：onclick={e => { e.preventDefault(); handler(e); }}。
3. 组件属性使用 let { propName } = $props()，而非多条 export let propName 声明。使用 $bindable() 将属性标记为可由父组件绑定。
4. Snippet 在大多数可复用标记中取代 slot——{#snippet name(params)}...{/snippet} 和 {@render name(args)} 可以减少重复，并且比具名 slot 更易组合。现有的 <slot> 用法仍然有效，但在新的 Svelte 5 代码中优先使用 snippet。

维护现有的 Svelte 4 代码库时，应在整个代码库中统一使用 export let、on:event 和 $: 响应式语句，不要混用不同范式——应有计划地迁移整个文件以使用 runes，而非顺带迁移。

样式

• 使用 Svelte 的 <style> 标签实现作用域样式
• 集成 Tailwind CSS 时不要使用 @apply 指令
• 将样式与组件放在一起

状态管理

• 使用 Svelte stores（或在 Svelte 5 中通过 .svelte.js/.svelte.ts 模块导出 $state）管理共享状态
• 对于复杂场景，通过类实现状态管理，并使用 $state 字段定义类的响应式属性
• 有效利用 Svelte 的响应性系统，默认不要使用外部状态库

SvelteKit 功能

• 使用基于文件的路由
• 正确实现 load 函数
• 妥善处理错误
• 使用表单操作处理变更
• 利用服务端数据加载

性能

• 重点优化 Web Vitals
• 尽量减少客户端 JavaScript
• 使用预加载加快导航
• 在适当场景实现延迟加载

国际化

• 使用 Paraglide.js 支持 i18n
• 正确处理区域设置

测试

• 使用 Vitest 进行单元测试
• 使用 Lighthouse 审核性能
• 编写全面的组件测试

无障碍

• 确保符合无障碍要求
• 使用语义化 HTML
• 正确设置 ARIA 属性