Svelte 快速上手

背景

Svelte 是新兴前端框架，不同于 Vue/React 的虚拟 DOM 运行时，它在编译阶段将模板编译为纯 JavaScript，运行时体积几乎为零。Stack Overflow 2023 开发者调查中被评为最受喜爱的 Web 框架。

核心概念

1. "赋值即响应"

Svelte 最大卖点：无需 useState / ref / setState，直接给变量赋值就触发更新。

<script>
  let count = 0
  function increment() { count += 1 }  // ← 就这么简单！
</script>

<p>{count}</p>
<button on:click={increment}>+1</button>

2. 响应式声明 $:

<script>
  let count = 0
  $: doubled = count * 2        // ← 自动追踪 count，变化时重新计算
  $: console.log(`count = ${count}`)  // ← 副作用也可以用 $:
  $: if (count > 10) alert('超过10了!')
</script>

3. 模板语法

<!-- 条件渲染 -->
{#if count > 10}
  <p>很多!</p>
{:else if count > 5}
  <p>还行</p>
{:else}
  <p>不多</p>
{/if}

<!-- 循环 -->
{#each items as item (item.id)}
  <li>{item.name}</li>
{/each}

<!-- 异步等待 -->
{#await promise}
  <p>加载中...</p>
{:then data}
  <p>{data}</p>
{:catch error}
  <p>出错了: {error.message}</p>
{/await}

4. Stores（状态管理）

// stores.js
import { writable } from 'svelte/store'
export const count = writable(0)

<script>
  import { count } from './stores.js'
  // $前缀自动订阅，销毁时自动取消
  $: doubled = $count * 2
</script>

<p>{$count} x 2 = {doubled}</p>
<button on:click={() => $count += 1}>+1</button>

5. SvelteKit 路由

src/routes/
  +page.svelte          → /
  +layout.svelte        → 全局布局
  about/+page.svelte    → /about
  blog/[slug]/+page.svelte → /blog/:slug
  +page.server.ts       → 服务端 load 函数
  +server.ts            → API 端点

分步操作：SvelteKit 毕设

npx sv create grad-project
cd grad-project
npm install
npm run dev

思考题

1. Svelte 的 $: 语法和 Vue 的 computed 有何异同？
2. 为什么 Svelte 可以不用虚拟 DOM？优缺点是什么？
3. SvelteKit 的 +page.server.ts 和 +server.ts 有什么区别？

毕设场景

• 追求新颖、答辩加分的项目
• 轻量级工具（打包体积 < 5KB）
• 嵌入式前端（如树莓派 Web 界面）