📌 第一部分：Svelte 概览与定位

1.1 定义与全称

Svelte 是由 Rich Harris 于 2016 年创建的前端框架，采用 "编译时" 策略——在构建时将代码编译为原生 JavaScript，而不是在浏览器中运行时进行 DOM 操作。Svelte 的名字来源于 "svelte"（苗条的），寓意其轻量高效。

1.2 核心定位

Svelte 的核心定位是 编译时前端框架。它提供了：

• 构建时编译（无运行时框架）
• 无虚拟 DOM（直接操作真实 DOM）
• 响应式声明（简洁的响应式语法）
• 组件化开发
• 内置作用域样式
• 动画和过渡支持
• TypeScript 支持
• SvelteKit（全栈应用框架）

1.3 主要应用领域

• 高性能 Web 应用： 追求极致性能的场景
• 移动端 Web： 包体积小，加载快
• 交互式组件： 嵌入式 widget 和组件
• 单页应用： 使用 SvelteKit
• 静态网站： 静态站点生成
• 数据可视化： 交互式图表

1.4 知名案例

• The New York Times： 使用 Svelte
• Spotify： 部分界面使用 Svelte
• Apple： 部分营销页面使用 Svelte
• GitHub： 部分内部工具使用 Svelte
• Nintendo： 部分页面使用 Svelte

---

📜 第二部分：Svelte 的历史与发展演进

2.1 诞生背景（2016年）

Rich Harris 在 2016 年创建了 Svelte，最初作为 Ractive.js 的进化版本。Svelte 的核心思想是：框架应该在构建时工作，而不是在运行时。

2.2 关键版本里程碑

• Svelte 1.0（2016年）： 首次发布
• Svelte 2.0（2017年）： 简化 API
• Svelte 3.0（2019年）： 重大革新——响应式声明式语法
• SvelteKit（2020年）： 全栈应用框架
• Svelte 4.0（2023年）： 性能优化
• Svelte 5.0（2024年）： 重大升级——Runes 响应式系统

---

⚙️ 第三部分：核心语法与特性

3.1 组件基础（Svelte 3/4）

// App.svelte
<script>
    // 响应式声明
    let count = 0;

    // 响应式语句
    $: doubled = count * 2;
    $: if (count > 10) {
        console.log("计数超过 10");
    }

    function increment() {
        count += 1;
    }

    function decrement() {
        count -= 1;
    }
</script>

<!-- 模板 -->
<main>
    <h1>计数: {count}</h1>
    <h2>两倍: {doubled}</h2>
    <button on:click={increment}>+1</button>
    <button on:click={decrement}>-1</button>

    {#if count > 5}
        <p>计数已超过 5！</p>
    {/if}

    {#each items as item, i}
        <li>{i}: {item.name}</li>
    {/each}

    <!-- 双向绑定 -->
    <input bind:value={name} placeholder="输入姓名" />
    <p>你好, {name}!</p>
</main>

<style>
    main {
        font-family: sans-serif;
    }
    h1 {
        color: #ff3e00;
    }
</style>

3.2 Svelte 5 Runes 语法

// Svelte 5 Runes 新语法
<script>
    // runes 语法
    let count = $state(0);
    let name = $state("");
    let items = $state([]);

    // 计算属性
    let doubled = $derived(count * 2);

    // 副作用
    $effect(() => {
        console.log(`计数变为: ${count}`);
    });

    // 事件处理
    function increment() {
        count += 1;
    }

    // Props
    let { title = "默认标题" } = $props();
</script>

<h1>{title}</h1>
<p>计数: {count} (两倍: {doubled})</p>
<button onclick={increment}>+1</button>

3.3 组件通信

// 父组件
<script>
    import Child from "./Child.svelte";
    let childData = "";

    function handleMessage(event) {
        childData = event.detail;
    }
</script>

<Child
    name="Alice"
    on:message={handleMessage}
/>
<p>来自子组件: {childData}</p>

// 子组件 Child.svelte
<script>
    export let name;           // Props
    import { createEventDispatcher } from "svelte";

    const dispatch = createEventDispatcher();

    function sendMessage() {
        dispatch("message", "Hello from child!");
    }
</script>

<div>
    <p>子组件: {name}</p>
    <button on:click={sendMessage}>发送消息</button>

    <!-- 插槽 -->
    <slot>默认内容</slot>
</div>

3.4 动画与过渡

<script>
    import { fade, fly, slide } from "svelte/transition";
    import { bounce } from "svelte/easing";
    let visible = true;
    let items = ["苹果", "香蕉", "橙子"];
</script>

<button on:click={() => visible = !visible}>切换</button>

{#if visible}
    <div transition:fade="{{ duration: 500 }}">
        淡入淡出
    </div>
    <div transition:fly="{{ y: 200, duration: 1000 }}">
        飞入
    </div>
    <div transition:slide>
        滑动
    </div>
{/if}

<!-- 列表动画 -->
{#each items as item, i (item)}
    <div animate:flip="{{ duration: 300 }}">
        {item}
        <button on:click={() => items = items.filter((_, j) => j !== i)}>删除</button>
    </div>
{/each}

3.5 存储（Store）

// store.js
import { writable, readable, derived } from "svelte/store";

// 可写存储
export const count = writable(0);

// 只读存储
export const time = readable(new Date(), (set) => {
    const interval = setInterval(() => {
        set(new Date());
    }, 1000);
    return () => clearInterval(interval);
});

// 派生存储
export const doubled = derived(count, $count => $count * 2);

// 在组件中使用
<script>
    import { count, doubled } from "./store.js";
    import { onDestroy } from "svelte";

    // 订阅存储
    const unsubscribe = count.subscribe(value => {
        console.log("计数:", value);
    });

    onDestroy(unsubscribe);

    function increment() {
        count.update(n => n + 1);
    }

    // 使用 $ 前缀自动订阅
    $: console.log($count, $doubled);
</script>

<p>计数: {$count}</p>
<p>两倍: {$doubled}</p>
<button on:click={increment}>+1</button>

3.6 SvelteKit 全栈框架

// +page.svelte（页面组件）
<script>
    import { page } from "$app/stores";
    import { enhance } from "$app/forms";
    let data;
    let count = 0;

    // 服务端数据
    export let data;
</script>

<svelte:head>
    <title>{data.title}</title>
</svelte:head>

<h1>{data.title}</h1>
<p>访问量: {data.visits}</p>

<button on:click={() => count++}>点击: {count}</button>

<!-- 服务端渲染 -->
<form method="POST" use:enhance>
    <input name="name" />
    <button type="submit">提交</button>
</form>

// +page.server.js（服务端逻辑）
export async function load({ params, cookies }) {
    return {
        title: "欢迎来到 SvelteKit",
        visits: await getVisits()
    };
}

export const actions = {
    default: async ({ request }) => {
        const data = await request.formData();
        const name = data.get("name");
        await saveName(name);
        return { success: true };
    }
};

---

⚖️ 第四部分：Svelte vs React vs Vue

对比项	Svelte	React	Vue
方式	编译时	运行时	运行时
虚拟 DOM	❌	✅	✅
包体积	极小	大	中
学习曲线	平缓	中等	平缓
性能	极高	高	高
生态	增长中	最大	大
适用场景	高性能应用	通用	通用

---

🧠 第五部分：学习建议

推荐学习资源

• Svelte 官方文档： svelte.dev
• SvelteKit 文档： kit.svelte.dev
• Svelte 教程： svelte.dev/tutorial
• Svelte 中文文档

---

🎯 总结升华