Svelte 速查表 - Svelte 框架常用语法大全
Svelte 编译型前端框架的必备语法都在这里了，从响应式到组件通信、从 Store 到动画，按功能分类整理，写代码时直接复制。
返回 Web 服务基础模板语法 6
{ expression }在模板中插入 JavaScript 表达式
{@html rawHtmlString}渲染原始 HTML（注意 XSS 风险）
{#if condition}...{:else if}...{:else}...{/if}条件渲染
{#each items as item, index}...{/each}遍历数组渲染
{#await promise}...{:then value}...{:catch error}...{/await}处理异步 Promise 状态
{#key expression}...{/key}表达式变化时销毁并重建内部内容
响应式声明 5
let count = 0;声明变量，赋值即触发视图更新
$: doubled = count * 2;响应式声明，依赖变化时自动重新计算
$: { console.log(count); }响应式语句块，依赖变化时执行
arr = [...arr, newItem];数组更新：赋值新引用触发更新
obj = { ...obj, key: value };对象更新：赋值新引用触发更新
组件与 Props 7
export let name;声明组件接收的 prop
export let name = "default";prop 带默认值
$$props访问所有传入的 props
$$restProps访问未显式声明的剩余 props
<slot />默认插槽，接收子组件内容
<slot name="header" />具名插槽
<slot let:item={item} />作用域插槽，向父组件传递数据
事件与绑定 7
<button on:click={handler}>绑定 DOM 事件
<form on:submit|preventDefault={handler}>事件修饰符（preventDefault/stopPropagation）
import { createEventDispatcher } from "svelte"; const dispatch = createEventDispatcher(); dispatch("event", data);子组件向父组件派发自定义事件
<input bind:value={name}>双向绑定 input 值
<input bind:this={inputEl}>绑定 DOM 元素引用
<input type="checkbox" bind:group={selected}>复选框组绑定到数组
<input type="radio" bind:group={choice}>单选框组绑定
生命周期 6
import { onMount } from "svelte"; onMount(() => { ... });组件挂载后执行（适合 API 请求）
import { beforeUpdate } from "svelte"; beforeUpdate(() => { ... });DOM 更新前执行
import { afterUpdate } from "svelte"; afterUpdate(() => { ... });DOM 更新后执行
import { onDestroy } from "svelte"; onDestroy(() => { ... });组件销毁前执行（清理定时器/订阅）
import { tick } from "svelte"; await tick();等待 DOM 更新完成，用于获取更新后的 DOM 状态
import { untrack } from "svelte"; untrack(() => { ... });在响应式声明中临时取消依赖追踪
Store 7
import { writable } from "svelte/store"; export const count = writable(0);创建可写 Store
import { readable } from "svelte/store"; export const time = readable(new Date(), (set) => { ... });创建只读 Store（带初始值和设置函数）
import { derived } from "svelte/store"; export const doubled = derived(count, ($c) => $c * 2);创建派生 Store，依赖其他 Store
$count在组件中自动订阅 Store，组件销毁时自动取消订阅
count.set(10);直接设置 Store 值
count.update(n => n + 1);基于当前值更新 Store
import { get } from "svelte/store"; const val = get(count);在非组件上下文中获取 Store 值
动作与过渡 7
use:action={{ param }}自定义动作（use:action）操作 DOM 元素
transition:fade淡入淡出过渡动画
transition:slide滑动展开/收起过渡动画
transition:scale缩放过渡动画
in:fly={{ x: 200, duration: 500 }}进入动画（飞入）
out:fly={{ x: -200 }}离开动画（飞出）
animate:flip列表元素位置变化时的动画（FLIP）
高级特性 5
import { setContext, getContext } from "svelte"; setContext("key", value); const val = getContext("key");跨层级组件通信（Context API）
import { hasContext } from "svelte"; hasContext("key");检查 context 是否存在
<script context="module">...</script>模块级脚本，每个组件实例只执行一次
export const greet = (name) => `Hello ${name}`;在 <script context="module"> 中导出可在组件外部使用的函数
svelte:options编译器选项，如 <svelte:options immutable={true} />
💡 提示
- Svelte 是编译型框架，没有运行时，生成的代码极小
- 响应式基于赋值触发，数组和对象需要用新赋值触发更新
- $: reactive 声明可以跟踪任何依赖的变化
- Store 在组件外管理状态，$store 语法自动订阅和取消订阅
- Svelte 5 引入了 Runes（$state/$derived/$effect）新响应式系统