全书目录

第三十篇:SvelteKit 完全指南 —— 轻量反应式剧场宇宙

第二章:为什么它显得“轻”,但并不“弱”

1 分钟 254 字 第 540 / 962 个阅读单元

Svelte 的底层气质和 React/Vue 很不一样。

很多框架是在浏览器里放一套比较重的运行时,靠运行时去观察变化、比较变化、协调变化。
Svelte 的思路更像:

text
把很多反应式工作提前在编译阶段做好
最后给浏览器更直接的 JavaScript

所以你在写组件时,经常会觉得它很“贴近语言本身”,而不是一直在和框架仪式打交道。

Svelte 5 的当前主流写法里,常见的反应式心智是这样的:

svelte
<script lang="ts">
  let selectedSeat = $state('A12');
  let price = $derived(selectedSeat.startsWith('VIP') ? 299 : 99);

  function upgrade() {
    selectedSeat = 'VIP-01';
  }
</script>

<p>当前座位:{selectedSeat}</p>
<p>票价:{price} 元</p>
<button onclick={upgrade}>升级到 VIP</button>

这里的关键不是语法细节,而是你要感受到:

text
Svelte 组件 = 真正的舞台零件
SvelteKit   = 让这些零件进入“可上线剧场体系”的那一层

也就是说:

  • Svelte 负责“这个场景怎么演”
  • SvelteKit 负责“观众如何进入、后台何时备场、表单怎么提交、服务端怎么接应、剧团怎么巡演”