前端进阶 · 第 1.6 章 Svelte 5 与 SolidJS：编译时与细粒度响应式

第 1.6 章　Svelte 5 与 SolidJS：编译时与细粒度响应式

Svelte 5 Runes · SolidJS

React/Vue 都是"运行时框架"——运行时还要跑虚拟 DOM diff。Svelte 和 SolidJS 换个思路：编译时把代码编译成直接操作 DOM 的代码，没有虚拟 DOM，运行时极小、性能极致。了解这两家是为了拓宽视野，招聘主流还是 React/Vue。

Svelte 5：Runes 新模型

Svelte 5（2024.12 正式）引入 Runes：响应式不再靠编译期魔法，而是用 $state/$derived/$effect/$props 显式声明，心智模型终于跟其他框架对齐。

Svelte 5 计数器 + Todo（.svelte 文件，HTML+JS+CSS 三合一）

<script>
  let { initial = 0 } = $props();           // $props 声明组件入参
  let count = $state(initial);              // $state 响应式状态
  let double = $derived(count * 2);         // $derived 派生值
  let todos = $state([{ text: "学 Svelte", done: false }]);

  $effect(() => console.log(`count=${count}`));  // $effect 副作用，自动追踪依赖

  function addTodo(e) {
    todos = [...todos, { text: e.target.value, done: false }];
    e.target.value = "";
  }
</script>

<button onclick={() => count--}>-</button>
<span>{count}（双倍 {double}）</span>
<button onclick={() => count++}>+</button>

<ul>
  {#each todos as t, i (t.text)}           <!-- {#each} 列表渲染，(key) -->
    <li class:done={t.done}>
      <input type="checkbox" bind:checked={t.done} /> {t.text}
    </li>
  {/each}
</ul>
<input on:keydown={(e) => e.key === "Enter" && addTodo(e)} placeholder="回车添加" />

<style>.done { text-decoration: line-through; }</style>  <!-- scoped 样式 -->

SvelteKit 是 Svelte 的全栈框架（对标 Next.js）：文件路由 +page.svelte（页面）、+page.ts（load 预加载）、+layout.svelte（布局）、+server.ts（API routes），支持 SSR/SSG/增量静态生成。

SolidJS：语法像 React，性能极致

Solid 用 JSX 语法（跟 React 几乎一样），但响应式是细粒度的：状态变了只更新绑到那个状态的 DOM 节点，不跑虚拟 DOM diff。包体小、更新快。

SolidJS 计数器 + Todo

import { createSignal, createEffect, For, Show } from "solid-js";

function App() {
  const [count, setCount] = createSignal(0);        // signal => getter/setter
  const [todos, setTodos] = createSignal(["学 Solid"]);
  const double = createMemo(() => count() * 2);      // 派生，有缓存

  createEffect(() => console.log(`count=${count()}`));

  return (
    <>
      <button onClick={() => setCount(count() - 1)}>-</button>
      <span>{count()} / {double()}</span>
      <button onClick={() => setCount(count() + 1)}>+</button>
      <ul>
      <For each={todos()}>{(t) => <li>{t}</li>}</For>   // 局部更新，不重渲染整个列表
      </ul>
    </>
  );
}

SolidStart 是 Solid 的全栈框架。Solid 还提供 <Show>（条件）、<Switch>/<Match>、<Portal>、createStore（细粒度对象状态）等原语。

前端框架选型决策表

框架	生态	学习曲线	性能/包体	适合
React 19	最大	陡	好	复杂应用、跨端 RN、找工作。
Vue 3	大	平缓	好	中后台、国内团队、快速出活。
Svelte 5	成长中	低（像写原生）	极佳（运行时极小）	内容站、小工具、个人项目。
SolidJS	较小	中（React 语法）	极致（细粒度）	追求性能、喜欢 React 语法。
Angular	大（老牌）	陡（重约定）	好	大型企业级、Google 系团队。

本章面试题

Q1. Svelte 为什么没有虚拟 DOM？

看答案

Svelte 是编译时框架，编译阶段把组件编译成直接操作 DOM 的细粒度指令，运行时不需要虚拟 DOM 做 diff，所以包体极小、更新快。

Q2. SolidJS 的 createSignal 和 React 的 useState 本质区别？

看答案

useState 变化触发组件整体重渲染再 diff；createSignal 变化只更新订阅了它的精确 DOM 节点，是细粒度响应式，没有虚拟 DOM。

SvelteKit：Svelte 的全栈应用框架

Svelte 本身是个编译器（组件编译成原生 JS，无运行时框架），但做完整应用需要路由、SSR、数据加载——这就是 SvelteKit，定位相当于 Svelte 界的 Next.js。同样按文件系统路由，src/routes/ 下一个文件就是一个页面。

约定	作用
`+page.svelte`	一个路由页面（视图）。
`+page.js / +page.server.js`	加载数据：`.server` 后缀表示只跑在服务端，可直接访问数据库、读 cookie。
`+layout.svelte`	嵌套布局，子路由共用外壳（侧边栏、导航）。
`+page.server.js 的 load()`	页面渲染前取数据，和 Next.js 的 `loader` 一个思路。

渲染模式：默认 SSR（服务端渲染 HTML 再水合），也可 SSG（静态预生成）、CSR（纯客户端）。部署到 Vercel / Netlify / Node 自托管都行。一句话记忆：Svelte 写组件，SvelteKit 管路由和全栈——和 React 生态里"React + Next.js"的分工一模一样。

← 上一节：第 1.5 章 Vue 3 完整教程前端进阶 · 总览下一节：第 2 章 SSR 与全栈：Next.js 15/16 →