#Svelte V5 教程简介

欢迎来到 Svelte V5 教程！

#什么是 Svelte？

Svelte 是一种构建 Web 用户界面的根本性新方法。

传统的框架（如 React 和 Vue）通常在浏览器中执行大部分工作（例如虚拟 DOM 对比），而 Svelte 将这些工作转移到了编译阶段，在构建应用时发生。

• 无虚拟 DOM (No Virtual DOM)：Svelte 编译出高度优化的原生 JavaScript，直接更新 DOM。
• 真正的响应式：你只需通过简单的赋值操作，Svelte 就能自动为你生成响应式代码。
• 体积小、速度快：抛弃了运行时的重重包袱，生成的应用代码极为精简，性能优异。

#Svelte V5 的新特性

Svelte 5 是 Svelte 历史上最大的一次版本更新。它引入了一个被称为 Runes 的全新响应式系统（取代了之前的 let 赋值和 $: 标签）：

• 引入了类似于 Signal 的细粒度响应式：$state(), $derived(), $effect()。
• 这使得状态可以更轻松地在组件之间共享和传递（不再仅仅局限于 .svelte 文件的顶层作用域）。
• 提供了更好的 TypeScript 支持。

#本教程将包含什么？

在本教程中，我们将深入探索 Svelte 5 的核心概念：

1. Svelte 5 的安装与快速起步
2. 彻底理解 Runes 响应式系统（$state, $derived, $effect, $props）
3. 模板语法（条件渲染、循环遍历、事件绑定）
4. 组件间的通信与插槽（Snippets）
5. 实战：结合 SvelteKit 构建一个完整的全栈应用。

---

本文为轻叶全栈手册原创内容，转载请注明出处。