1. Svelte 概述与核心特点
1.1 什么是 Svelte？
Svelte 是一种构建用户界面的编译器。它在构建阶段将代码转化为高效的 JavaScript。
1.2 核心优势（Svelte 5 进化）
- Signals 驱动：Svelte 5 引入了基于信号（Signals）的响应式系统，更新粒度精确到"点"，不再需要全量对比。
- 一致性 ：通过 Runes（符文） ，在
.svelte组件内和普通的.js/.ts文件中使用相同的响应式逻辑。 - 极致轻量：由于不带运行时 VDOM，应用体积保持业内领先。
2. 环境搭建与项目初始化
2.1 创建项目 (SvelteKit)
目前官方强烈建议使用 SvelteKit 启动项目，因为它提供了成熟的路由和部署适配器。
Bash
# 使用官方最新模板（默认支持 Svelte 5）
npx sv create my-app
cd my-app
npm install
npm run dev -- --open3. 核心语法：从传统到 Runes
Svelte 5 引入了以 $ 开头的符文（Runes） ，取代了旧版的 let 赋值和 $: 语法。
3.1 状态声明：$state
不再仅仅是 let，使用 $state 声明的状态是深层响应式的。
Svelte
<script>
// 基础状态
let count = $state(0);
// 复杂对象的深层响应式
let user = $state({ name: 'Alice', scores: [10, 20] });
function update() {
count++;
user.scores.push(30); // 数组操作会自动触发 UI 更新！
}
</script>
<button onclick={update}>计数：{count}</button>
<p>分数：{user.scores.join(', ')}</p>3.2 派生状态与副作用：derived 与 effect
取代了旧版的 $: 语法，逻辑更清晰。
| 功能 | Svelte 4 (旧) | Svelte 5 (新 Runes) |
|---|---|---|
| 派生计算 | $: double = count * 2 |
let double = $derived(count * 2) |
| 副作用 | $: console.log(count) |
$effect(() => { console.log(count) }) |
4. 组件交互：更现代的通信
4.1 属性接收：$props
废弃了 export let，现在使用解构赋值，支持更好的 TypeScript 类型推断。
Svelte
<script>
// 接收参数，并设置默认值
let { name = "游客", age, children } = $props();
</script>
<div>
<h3>姓名：{name}，年龄：{age}</h3>
{@render children?.()}
</div>4.2 双向绑定：$bindable
在 Svelte 5 中，如果你希望一个属性支持 bind:，必须显式声明。
Svelte
<script>
let { value = $bindable() } = $props();
</script>
<input bind:value={value} />4.3 代码片段：Snippets
Snippets 是 Svelte 5 的重磅功能，它取代了复杂的 Slot 插槽，让 UI 块可以像变量一样传递和复用。
Svelte
{#snippet header(title)}
<header class="fancy-header">
<h1>{title}</h1>
</header>
{/snippet}
{@render header("欢迎来到我的应用")}5. 事件处理：回归标准
Svelte 5 简化了事件语法，去掉了 on:click 这种指令，直接使用标准的 HTML 属性。
- 原生事件 ：
<button onclick={handler}>（注意是小写且连写）。 - 事件转发 ：不再需要
createEventDispatcher。父组件传什么，子组件直接调用对应的 prop 函数即可。
6. 状态管理与调试
6.1 全局状态
由于 Runes 可以在 .js 文件中使用，你不再强依赖 writable store。
JavaScript
// state.svelte.js (注意后缀名)
export const globalStats = $state({
theme: 'dark',
toggle() { this.theme = this.theme === 'dark' ? 'light' : 'dark' }
});6.2 调试符文：$inspect
在控制台实时追踪状态变化，比 console.log 更高效。
Svelte
<script>
let count = $state(0);
$inspect(count); // 每当 count 变化，控制台都会自动打印
</script>7. 部署与优化
7.1 构建命令
Bash
npm run build7.2 适配器 (Adapters)
SvelteKit 会根据你的环境自动选择适配器：
- Vercel / Netlify：原生支持，直接推送到 Git 仓库即可。
- adapter-static：适合生成纯静态页面（如个人博客）。
- adapter-node：适合需要 Node.js 运行环境的后端集成。