要点
观察一篇 Svelte。定位一句话说完：编译时 UI 框架——组件在构建期被编译成直接操作 DOM 的普通 JavaScript，没有虚拟 DOM，浏览器默认不需要下载框架运行时。Svelte 5 于 2024 年 10 月 22 日 GA，用符文（runes）重写了响应式心智，是本篇的重点；截至本文（2025 年 10 月）稳定线是 Svelte 5.x，全栈配套是 SvelteKit 2。看完这篇你能回答四个问题：编译时框架的运行时去哪了、runes 与 Svelte 4 及 React/Vue 的心智差异在哪、SvelteKit 承担什么角色、以及现在学它值不值。
先给一个阅读预告：本站下个月（2025-11）会发姊妹篇《SolidJS 入门：细粒度响应式与没有虚拟 DOM》——同属”甩掉虚拟 DOM”的路线，但走的是运行时信号而非编译时变换，届时两篇对读，这条技术路线的全貌就齐了。
编译时框架：运行时去哪了
React、Vue 这类运行时框架的公共成本是：浏览器要先下载并执行框架本体，才能让你的组件跑起来，之后的每次状态变化都要经过一层协调（React 是虚拟 DOM diff，Vue 是响应式系统加 patch）。Svelte 把这一层挪到了构建期：编译器在打包时分析组件，产出”这个状态变了就更新这几个具体 DOM 节点”的普通 JS 代码。框架在构建期用完即走，产物里没有它——组件越小越简单，省得越明显。
代价也要说清楚：Svelte 语法看着像 HTML，但它是一种需要编译器的语言，不是”带超能力的 HTML”。脱离官方工具链就没法运行，编辑器插件、预处理配置都是绕不开的依赖。另外 runes 看起来像新语法，本质是编译器对普通 JS 做的标记变换——闭包、模块、解构这些 JS 基础直接决定上手感，站内Node.js 与 JavaScript 语言特性详解讲的语言层面内容完全通用。
Svelte 5 runes：新的响应式心智
Svelte 4 时代，响应式是”隐式魔法”：let 声明的变量自动响应，$: 语句自动重算——省事，但边界模糊，哪些变量参与追踪全靠编译器猜。Svelte 5 改成显式声明：响应式关系由几个符文函数写明，编译器据此生成精确的更新代码：
<script>
let count = $state(0); // 响应式状态：编译器把它改写成信号
let doubled = $derived(count * 2); // 派生值：依赖变化自动重算，无需手写依赖数组
$effect(() => {
document.title = `当前计数 ${count}`; // 副作用：依赖的信号变化时重新执行
});
</script>
<!-- Svelte 5 用事件属性 onclick，Svelte 4 的 on:click 指令已让位 -->
<button onclick={() => count++}>
{count} 的两倍是 {doubled}
</button>常用符文就五个，值得整表记住：
| 符文 | 作用 | Svelte 4 时代的对应物 |
|---|---|---|
| $state | 声明响应式状态 | 隐式响应的 let 变量 |
| $derived | 派生值，依赖变化自动重算 | $: 响应式语句 |
| $effect | 副作用，依赖的信号变化时重跑 | $: 语句里顺手写副作用 |
| $props | 声明组件入参 | export let 逐个声明 |
| $bindable | 标记可双向绑定的入参 | 任意 prop 默认可 bind |
一个关键认知：这些符文不是运行时函数，而是编译期标记——写成函数的样子是为了让编辑器有语法提示、让响应式关系显式可读，实际作用是告诉编译器”这里生成信号代码”。
反模式点名：用 $effect 手动同步派生值。这是官方文档专门列出的头号误用：
// 反模式：effect 里给状态赋值 —— 多一轮更新循环，依赖关系被藏进副作用
$effect(() => { total = items.length * price; });
// 正解：声明派生关系，值永远与源一致，也不存在"忘了同步"这类 bug
let total = $derived(items.length * price);判断标准很简单：如果一个值能从别的值算出来，它就该是 $derived；$effect 只留给真正需要接触外部世界的事——改标题、发请求、操作非 Svelte 管辖的 DOM。
与 React/Vue 的心智对照
同一张计数器在三家的写法差异，本质是三套响应式哲学：
| 关注点 | Svelte 5 | React | Vue 3 |
|---|---|---|---|
| 响应式载体 | 编译期改写的信号（runes） | 不可变状态，触发组件函数重跑 | Proxy 拦截的响应式对象 |
| 派生值 | $derived，自动追踪 | useMemo，手写依赖数组 | computed，自动追踪 |
| 副作用 | $effect，自动追踪 | useEffect，手写依赖数组 | watchEffect，自动追踪 |
| 更新粒度 | 直接更新绑定了信号的 DOM 节点 | 虚拟 DOM diff 后整树协调 | 组件级重渲染加依赖追踪的 patch |
| 浏览器产物 | 普通 JS，无框架运行时 | 必须带上 React 运行时 | 必须带上 Vue 运行时 |
React 那栏的”手写依赖数组”为什么累、组件函数重跑什么时候在白算，属于另一个话题，站内有 React 渲染与 Hooks 的深潜文章可自行翻阅，本篇不展开。从对照里能看出 Svelte 5 的取向：把”依赖谁”交给编译器，把”声明权”交回给你——比 React 省心，比 Svelte 4 可控。
SvelteKit 一句话
写 Svelte 应用，默认就是 Svelte 加 SvelteKit 的组合：后者管路由、服务端渲染（SSR）与数据加载，定位类似 Next.js 之于 React。工程创建已经收敛到官方 CLI：
npx sv create my-app # 官方脚手架，交互式选模板与类型检查
cd my-app
npm run dev上手门槛主要在数据加载：SvelteKit 的 load 函数是异步的，Promise 与 async/await 不熟的先补站内Node.js 异步与 Promise，这部分知识在前后端完全通用。
要不要现在投入
诚实的判断。新项目：可以放心用——Svelte 5 GA 已近一年，runes 是明确且稳定的方向，文档与生态完成度足够，起步直接 Svelte 5 加 SvelteKit 2。存量 Svelte 4 项目：不必赶迁移，5 支持新旧语法在同一个代码库里共存，官方迁移脚本辅助，适合渐进；但也没有紧迫性，4 还能稳定跑很久。相对 React/Vue 的现实是：岗位数量、组件库选择、中文资料量级都差着一截，团队协作与招聘优先的场景要掂量。它的甜区很清楚——独立开发者、中小型站点、对首屏体积敏感的场景，写起来痛快、产物干净。学习成本方面，会 HTML/CSS/JS 就能起步，是主流框架里入门曲线最平的一档。
延伸阅读
想看”没有虚拟 DOM”路线的另一种实现（运行时信号，而非编译时变换），等本站即将发布的《SolidJS 入门：细粒度响应式与没有虚拟 DOM》（开篇已给链接），与本文对读效果最好；JS 与异步基础不牢的，先消化上文链接的两篇 Node.js 文章再回来。
版本核实（以官方文档为准）：Svelte 5.0 于 2024-10-22 GA（官方博客 Svelte 5 is alive），响应式体系为 runes（$state/$derived/$effect/$props/$bindable），事件改用 onclick 等事件属性；SvelteKit 2 为配套全栈框架，工程脚手架为官方 CLI sv（npx sv create，取代旧 create-svelte）；截至本文稳定线为 Svelte 5.x。安装命令均不钉版本号，以 svelte.dev 当前文档为准。