Svelte

编译时框架的先驱,在构建阶段将组件编译为高效的原生 JavaScript 代码,零运行时开销,极致性能和开发体验。

2016发布年份
Vercel维护方

核心特性

编译时框架

Svelte 在构建时将组件编译为高效的原生 JS,没有 Virtual DOM,没有运行时框架代码,Bundle 极小。

零运行时编译优化小体积

Svelte 5 Runes

Svelte 5 引入的新响应式系统,使用 $state、$derived、$effect 等 Runes 实现精确的细粒度更新。

$state$derived$effect

简洁语法

更少的样板代码,更接近原生 HTML/CSS/JS。不需要 useEffect、useState 等 Hook,状态变更直接赋值。

简洁模板直觉式少样板

过渡动画

内置声明式过渡动画系统,通过 transition:fade 等指令轻松实现元素进出动画,无需第三方库。

transition:animate:内置动画

生态系统

SvelteKit

Svelte 官方全栈框架,支持 SSR/SSG/ISR,文件路由,服务端 API,适配多种部署平台。

SSR文件路由适配器

UI 组件库

社区提供多种高质量组件库,Skeleton 是最流行的 Svelte UI 库,Flowbite Svelte 提供 Tailwind 组件。

SkeletonFlowbiteDaisyUI

状态管理

Svelte 内置 Store 机制(Svelte 5 中被 Runes 取代),也可以使用 Nanostores 等框架无关方案。

writablereadableNanostores

数据获取

SvelteKit 内置 load 函数处理数据加载,也可以使用 TanStack Query 等通用方案。

load()Form ActionsTanStack Query

测试工具

Vitest 作为单元测试,Playwright 进行 E2E 测试,Storybook 用于组件可视化测试。

VitestPlaywrightStorybook

Svelte AI

Svelte 团队正在探索 AI 辅助开发,SvelteLab 提供在线 REPL,社区工具日益丰富。

SvelteLabREPLAI集成

快速入门

<!-- Svelte 5 组件示例 -->
<script>
  let count = $state(0);
  let double = $derived(count * 2);

  function increment() {
    count += 1;
  }
</script>

<h1>计数: {count}</h1>
<p>双倍: {double}</p>
<button onclick={increment}>+1</button>

<style>
  button {
    background: #ff3e00;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
  }
</style>

学习资源

官方教程

交互式教程,从基础到高级,非常适合入门。

svelte.dev/tutorial →

SvelteKit 文档

SvelteKit 全栈框架官方文档。

SvelteKit Docs →

Svelte 文档

Svelte 与 SvelteKit 的官方学习和参考文档。

svelte.dev/docs →