---
title: "Svelte 初体验：不一样的思路"
date: 2026-05-10T09:30:00+08:00
draft: false
description: "试用了 Svelte 5 的 runes 语法和 SvelteKit 框架。没有虚拟 DOM，编译时直接把组件转成 DOM 操作代码，打包体积小得惊人。"
tags:
  - Svelte
  - 前端
  - JavaScript
---

用惯了 React 和 Vue，第一次接触 Svelte 的时候确实有种新鲜感。最直观的感受：**代码量少了很多**。

## Runes 语法

Svelte 5 引入了 runes 语法，让响应式声明更显式：

- **`$state`** — 声明响应式变量，替代了之前靠赋值触发响应式的隐式规则。
- **`$derived`** — 衍生值，类似 Vue 的 computed。
- **`$effect`** — 副作用，自动追踪依赖并在变化时执行。

```svelte
<script>
  let count = $state(0);
  let doubled = $derived(count * 2);

  $effect(() => {
    console.log(`count is now ${count}`);
  });
</script>
```

逻辑清晰，没有 `useEffect` 的依赖数组心智负担。

## 编译时魔法

Svelte 的核心理念：没有虚拟 DOM，编译器在构建时直接把组件转成高效的 DOM 操作代码。打包体积小得惊人，一个简单的组件可能只有几百字节。对移动端场景尤其友好。

## SvelteKit

SvelteKit 是 Svelte 的全栈框架，文件路由设计简洁。约定优于配置——新建一个 `src/routes/about/+page.svelte`，就自动有了 `/about` 路由。内置 SSR、SSG、CSR 多种渲染模式，服务器端数据加载用 `load` 函数，类型安全做得不错。

## 总结

Svelte 适合想要减少样板代码、追求小打包体积的项目。React 和 Vue 的生态更成熟，但 Svelte 的思路值得关注。下一步打算用 SvelteKit 重写个人博客试试看。