Svelte 基础

Svelte 把组件在 构建阶段 编译成 JavaScript，而不是在浏览器里跑一个「Svelte 运行时去 diff 整棵树」。语法像增强版 HTML；响应式靠 $: 与赋值触发，无需像 React 核心 那样显式 setState。

学习目标

• 读懂 .svelte 单文件组件结构
• 掌握 let、响应式声明、{#each} / {#if}
• 对比 Svelte 与 Vue 核心 模板的异同

单文件组件结构

<script>
  let count = 0;

  $: doubled = count * 2;

  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  {count} × 2 = {doubled}
</button>

<style>
  button { font-weight: 600; }
</style>

• <script>：逻辑与状态
• 模板：HTML + {表达式} + 块级语法
• <style>：默认 scoped，类似 Vue SFC

响应式规则

写法	行为
let n = 0	顶层变量可变即触发更新
$: derived = f(n)	依赖变化时重算
$: { ... }	依赖变化时执行语句块

注意：数组/对象 原地修改 有时需 items = items 或 {...items} 触发——编译器会提示常见坑；概念上接近 Vue 的 ref 解包。

与 React / Vue 对照

概念	Svelte	React	Vue
列表	{#each}	.map()	v-for
条件	{#if}	&& / 三元	v-if
事件	on:click	onClick	@click
双向绑定	bind:value	受控组件	v-model

Svelte 没有虚拟 DOM：编译器知道哪个节点绑定了哪个变量，更新更直接。包体积常小于同功能 react-essentials SPA，尤其 widget 场景。

构建入口

日常用 Vite + @sveltejs/vite-plugin-svelte 或 SvelteKit（下一课）。与 frontend-toolchain-essentials 中的 Vite 课衔接：开发仍是 HMR，只是编译插件换成 Svelte。

练习

• 在 Svelte REPL 写一个 Todo 列表（增删）
• 把同一 UI 用 Vue ref + v-for 草写一遍，标出三处语法差异
• 读官方 Tutorial 第 1–3 章，确认 $: 语义

小结

Svelte = 编译时优化 + 模板友好 + 细粒度响应式。 下一课 SvelteKit 补全路由、SSR 与生产项目结构。