# Svelte 5 - 编译器优先的反应式框架 ## 概述 Svelte 是一个**基于编译器的**反应式 UI 框架，它将工作从运行时转移到构建时。与 React/Vue 不同，Svelte 以最小的开销将组件编译为高度优化的普通 JavaScript。 **Svelte 5** 引入了 Runes API，以实现显式、细粒度的反应性。 **主要特点**： * **Runes API** ：$state、$driven、$effect 显式反应 * **零运行时开销**：编译为普通 JS * **内置状态管理**：无需外部库 * **SvelteKit** ：带有 SSR/SSG/SPA 的全栈框架 * **编写更少的代码** ：简单、可读的组件语法 * **卓越的性能**：小捆绑，快速运行 **安装**： # 创建新的 SvelteKit 项目 npm 创建 svelte@latest my-app cd 我的应用程序 npm 安装 npm 运行开发 # 或仅 Svelte（无 SvelteKit） npm create vite@latest my-app ---template svelte-ts ## Svelte 5 Runes API（现代方法） ### 使用 $state 进行状态管理 <脚本语言=“ts”> // 反应状态 - 自动跟踪变化让计数 = $state(0); 让 user = $state({ name: 'Alice', 年龄: 30 }); // 数组和对象具有深度反应性让 todos = $state([]); 函数addTodo（文本：字符串）{ todos.push({ id: Date.now(), text, done: false }); // 不需要像 React 这样的 todos = [...todos]！ } 函数增量() { 计数++； // 触发反应 } <按钮onclick={增量}> 点击了 {count} 次 ### 使用 $衍生计算值 <脚本语言=“ts”> 让firstName = $state('约翰'); 让lastName = $state('Doe'); // 当依赖改变时自动更新让 fullName = $衍生(`${firstName} ${lastName}`); 让问候= $衍生（`你好，$ {fullName}`）; // 复杂的推导让 items = $state([1, 2, 3, 4, 5]); 让总计= $衍生(items.reduce((sum, n) => sum + n, 0)); 让平均值= $衍生（总计/项目.长度）；

{问候}

平均值：{average.toFixed(2)}

### 与 $effect 的副作用 <脚本语言=“ts”> 让计数 = $state(0); 让日志= $state([]); // 当依赖关系改变时运行 $效果(() => { console.log(`计数现在是：${count}`); logs.push(`计数更改为${count}`); // 可选的清理函数返回（）=> { console.log('清理之前的效果'); }; }); // 外部订阅的效果 $效果(() => { 常量间隔 = setInterval(() => { 计数++； }, 1000); 返回（）=>清除间隔（间隔）； }); ### 带有 $props 的组件 Props <脚本语言=“ts”> 接口道具 { 标题：字符串；数？：数量； onUpdate?: (值: 数字) => void; } // 带默认值的类型安全 props 让 { 标题, 计数 = 0, onUpdate } = $props(); // Props 是只读的，但可以从中派生让displayTitle = $衍生(title.toUpperCase());

{displayTitle}

计数：{count}

<按钮 onclick={() => onUpdate?.(count + 1)}> 增量 ### 使用 $bindable 进行双向绑定 <脚本语言=“ts”> 接口道具 { 值：字符串；占位符？：字符串； } // 允许父级绑定到此 prop let { value = $bindable(''), placeholder = '搜索...' } = $props(); <输入绑定：值{占位符}类型=“搜索”/> <脚本语言=“ts”> 从 './SearchInput.svelte' 导入 SearchInput；让查询 = $state(''); 让结果= $衍生（查询？搜索（查询）：[]）；

找到“{query}”的 {results.length} 个结果

## 组件模式 ### 基本组件结构 <脚本语言=“ts”> 让计数 = $state(0); 让双倍= $衍生（计数* 2）; 函数增量() { 计数++； } 函数减量() { 数——； }

<按钮onclick={减量}>- 计数：{count}（加倍：{doubled}） <按钮onclick={increment}>+

<风格> .计数器{ 显示：柔性；间隙：1rem；对齐项目：居中； } 按钮{ 填充：0.5rem 1rem；字体大小：1.2rem； } ### 条件渲染 <脚本语言=“ts”> 让登录 = $状态（假）; 让用户 = $state<用户 |空>(空); 让加载= $state(true); {#如果正在加载}

正在加载...

{:否则如果登录&&用户}

欢迎，{user.name}！

{：其他}

请登录

{/如果} ### 列出并键入每个块 <脚本语言=“ts”> 界面待办事项{ id：号码；文本：字符串；完成：布尔值； } 让 todos = $state([ { id: 1, text: '学习 Svelte', done: true }, { id: 2, text: '构建应用程序', 完成: false } ]); 功能切换（id：数字）{ const todo = todos.find(t => t.id === id); if (todo) todo.done = !todo.done; }

<输入类型=“复选框” 检查= {todo.done} onchange={() => 切换(todo.id)} /> {todo.text}

<风格> .完成{ 文本装饰：穿行；不透明度：0.6； } ## SvelteKit 框架 ### 项目结构我的应用程序/ ├── src/ │ ├── 路线/ │ │ ├── +page.svelte # 主页 │ │ ├── +page.ts # 通用加载 │ │ ├── +page.server.ts # 服务器负载 │ │ ├── +layout.svelte # 共享布局 │ │ ├── 关于/ │ │ │ └── +page.svelte # /about │ │ └── 博客/ │ │ ├── +page.svelte # /blog │ │ └── [蛞蝓]/ │ │ └── +page.svelte # /blog/my-post │ ├── 库/ │ │ ├── 组件/ │ │ ├── 店铺/ │ │ └── 实用程序/ │ └── app.html ├── static/ # 静态资源 └── svelte.config.js ### 加载函数（数据获取） // src/routes/blog/[slug]/+page.ts 从 './$types' 导入类型 { PageLoad }；导出常量负载： PageLoad = async ({ params, fetch }) => { const 响应 =等待 fetch(`/api/posts/${params.slug}`); const post =等待response.json(); 返回{ 帖子 }; }; <脚本语言=“ts”> 从 './$types' 导入类型 { PageData }；让 { 数据 } = $props<{ 数据: PageData }>(); <文章>

{data.post.title}

{@html data.post.content}

### 仅服务器加载函数 // src/routes/admin/+page.server.ts 从“@sveltejs/kit”导入{重定向}；从 './$types' 导入类型 { PageServerLoad }；导出常量负载：PageServerLoad = async ({ locals }) => { if (!locals.user?.isAdmin) { 抛出重定向（303，'/登录'）； } const users = wait db.users.findMany(); 返回{ 用户 }; }; ### 表单操作 // src/routes/login/+page.server.ts 从'@sveltejs/kit'导入{失败，重定向}；从 './$types' 导入类型 { Actions }；从 'zod' 导入 { z }； const 架构 = z.object({ 电子邮件：z.string().email(), 密码：z.string().min(8) }); 导出常量操作 = { 默认值： async ({ request, cookies }) => { const formData = 等待 request.formData(); const data = Object.fromEntries(formData); const 结果 = schema.safeParse(data); 如果（！结果。成功）{ 返回失败（400，{ 错误： result.error.flatten().fieldErrors }); } const user =等待authenticateUser(结果.data); 如果（！用户）{ 返回失败（401，{消息：'无效的凭据'}）； } cookies.set('session', user.sessionToken, { path: '/' }); 抛出重定向（303，'/仪表板'）； } } 满足动作； <脚本语言=“ts”> 从 './$types' 导入类型 { ActionData }； let { form } = $props<{ form?: ActionData }>(); <表单方法=“POST”> <输入名称=“电子邮件”类型=“电子邮件”必需/> {#if 表单？.错误？.电子邮件} {form.errors.email[0]} {/如果} <输入名称=“密码”类型=“密码”必需/> {#if 表单？.错误？.密码} {form.errors.password[0]} {/如果} {#if 形式？.message}

{form.message}

{/如果} ## 状态管理模式 ### 基于符文的商店（现代） // src/lib/stores/cart.svelte.ts 接口购物车项目{ id：号码；名称：字符串；价格：数量；数量：数量； } 函数创建购物车（）{ 让 items = $state([]); 让总计 = $衍生( items.reduce((sum, item) => sum + item.price * item.quantity, 0) ）；让 itemCount = $衍生（ items.reduce((sum, item) => sum + item.quantity, 0) ）；返回{ 获取项目（）{ 返回项目； }, 获取总计（）{ 返回总计； }, 获取 itemCount() { 返回 itemCount; }, addItem(项目: 省略 ) { const现有 = items.find(i => i.id === item.id); 如果（现有）{ 现有.数量++; } 否则{ items.push({ ...item, 数量: 1 }); } }, 删除项目（id：数字）{ items = items.filter(i => i.id !== id); }, 清除（）{ 项目=[]； } }; } 导出常量购物车 = createCart(); <脚本语言=“ts”> 从 '$lib/stores/cart.svelte' 导入 { cart } ；

商品：{cart.itemCount}

总计：${cart.total.toFixed(2)}

### 传统 Svelte 商店（Svelte 4 风格） // src/lib/stores/user.ts 从'svelte/store'导入{可写，派生}；界面用户{ id：号码；名称：字符串；电子邮件：字符串； } 函数创建用户存储（）{ const { 订阅、设置、更新 } = 可写<用户|空>(空); 返回{ 订阅，登录：（用户：用户）=>设置（用户），注销: () => 设置(null), updateName: (name: string) => update(u => u ? { ...u, name } : null) }; } 导出 const user = createUserStore(); // 派生商店导出 const isLoggedIn = 派生(用户, $user => $user !== null); <脚本语言=“ts”> 从 '$lib/stores/user' 导入 { user, isLoggedIn }; {#if $isLoggedIn}

欢迎，{$user?.name}！

{：其他}

请登录

{/如果} ## 动画和过渡 ### 内置转换 <脚本语言=“ts”> 从 'svelte/transition' 导入 { fade、slide、fly、scale }；从 'svelte/easing' 导入 { quintOut }；让可见 = $state(true); <按钮 onclick={() => 可见 = !visible}> 切换 {#如果可见}

淡入淡出

滑入和滑出

从底部飞进来

{/如果} ### 自定义转换 // src/lib/transitions.ts 导出函数模糊（节点：HTMLElement，{持续时间= 300}）{ 返回{ 持续时间， css: (t: 数字) => ` 不透明度：${t}；滤镜：模糊(${(1 - t) * 10}px); ` }; } <脚本语言=“ts”> 从'$lib/transitions'导入{模糊}；让 show = $state(true); {#如果显示}

自定义模糊过渡

{/如果} ### 动画指令（FLIP 动画） <脚本语言=“ts”> 从'svelte/animate'导入{翻转}；从 'svelte/easing' 导入 { quintOut }；让 items = $state([1, 2, 3, 4, 5]); 函数洗牌（）{ items = items.sort(() => Math.random() - 0.5); }

{项目}

## 高级功能 ### 操作（元素行为） // src/lib/actions.ts 导出函数 clickOutside(节点: HTMLElement, 回调: () => void) { const handleClick = (事件: MouseEvent) => { if (!node.contains(event.target as Node)) { 回调（）； } }; document.addEventListener('click',handleClick,true); 返回{ 销毁（）{ document.removeEventListener('click',handleClick,true); } }; } <脚本语言=“ts”> 从 '$lib/actions' 导入 { clickOutside }；让 showMenu = $state(false); <按钮 onclick={() => showMenu = !showMenu}> 菜单 {#if 显示菜单}

showMenu = false} >

第 1 项
第 2 项

{/如果} ### 插槽和组件组成 <脚本语言=“ts”> 让 { 标题 } = $props<{ 标题?: 字符串 }>(); <标题> {#如果标题}

{标题}

{：其他} 默认标头 {/如果} <主要> 默认内容 <页脚> <插槽名称=“页脚”/> <卡标题=“我的卡”>

这是主要内容

<按钮>操作 ### 特殊元素 <脚本语言=“ts”> 让 Component = $state(A); 让标签 = $state<'div' | '跨度'>('div'); 内容 console.log('调整窗口大小')} onkeydown={(e) => console.log(e.key)} /> <苗条：头> <标题>我的页面 <元名称=“描述”内容=“描述”/> ## 从 React/Vue 迁移 ### 对 Svelte 5 做出反应反应 |苗条 5 |注释 ---|---|--- `useState(0)` | `$状态(0)` |直接状态 `useMemo(() => x * 2, [x])` | `$衍生(x * 2)` |自动追踪 `useEffect(() => {...}, [x])` | `$effect(() => {...})` |汽车部门 `props.name` | `让 { name } = $props()` |解构 `{show &&

}` | `{#if show}

{/if}` |显式的 ### Vue 3 到 Svelte 5 Vue 3 |苗条 5 |注释 ---|---|--- `参考(0)` | `$状态(0)` |直接状态 `计算(() => x * 2)` | `$衍生(x * 2)` |类似 `watch(() => x, ...)` | `$effect(() => {...})` |自动追踪 `defineProps<{ name: string }>()` | `let { name } = $props()` |类型安全 `v-if="显示"` | `{#if show}` |块语法 ## 性能最佳实践 1. **当只需要计算值时，使用 $driven 而非 $effect** 2. **避免不必要的$effect** \- 仅用于副作用，不适用于计算 3. **利用编译器优化** \- Svelte 在构建时完成大部分工作 4. **使用键控的每个块** \- `{#each items as item (item.id)}` 5. **延迟加载组件** \- `const Component = wait import('./Heavy.svelte')` 6. **初始加载的SSR** \- 使用SvelteKit的SSR功能 7. **优化捆绑** \- 使用适配器作为部署目标 ## 测试 ### 使用 Vitest 进行单元测试 // 计数器.test.ts 从 '@testing-library/svelte' 导入 { render, fireEvent }; 从“vitest”导入{期望，测试}；从 './Counter.svelte' 导入计数器； test('点击时增加计数器', async () => { const { getByText } = 渲染（计数器）； const 按钮 = getByText('+'); 等待 fireEvent.click(按钮); 期望（getByText（/计数：1/））。toBeInTheDocument（）; }); ### E2E 与剧作家 // 测试/login.test.ts 从'@playwright/test'导入{期望，测试}； test('用户可以登录', async ({ page }) => { 等待 page.goto('/login'); 等待 page.fill('input[name="email"]', 'user@example.com'); 等待页面.fill（'输入[名称=“密码”]'，'密码123'）; 等待 page.click('button[type="submit"]'); 等待期望（页面）.toHaveURL（'/仪表板'）; 等待期望(page.locator('text=欢迎')).toBeVisible(); }); ## 部署 ### 适配器 // svelte.config.js 从“@sveltejs/adapter-vercel”导入适配器； // 或适配器节点、适配器静态导出默认值{ 套件：{ 适配器：适配器() } }; **可用适配器**： * `adapter-auto`: 自动检测平台 * `adapter-vercel`: Vercel 部署 * `适配器节点`：Node.js 服务器 * `adapter-static`: 静态站点生成 * `adapter-cloudflare`：Cloudflare 页面/Workers * `adapter-netlify`: Netlify 部署 ## 资源 * **Svelte 文档**： * **SvelteKit 文档**： * **Svelte 5 符文** ： * **教程**： * **REPL** ： ## 总结 * **Svelte 5** 使用 Runes API（$state、$driven、$effect）来实现显式反应 * **编译器优先** \- 将工作转移到构建时间，以最小化运行时开销 * **SvelteKit** 提供 SSR/SSG/SPA 模式的全栈功能 * **编写更少的代码** \- 比 React/Vue 更简单的语法 * **卓越的性能** \- 小捆绑，快速运行 * **迁移友好** \- Svelte 4 和 5 可以共存 * **类型安全** \- 一流的 TypeScript 支持

苗条的

包含技能