Svelte 速查
共 24 条 Svelte / SvelteKit 常用写法与命令，涵盖组件与响应式、模板语法、状态与 Store、SvelteKit、命令。 支持搜索与分类筛选，点击即可复制。
组件与响应式
.svelte 文件 = 模板 + 脚本 + 样式。
| 命令 | 说明 |
|---|---|
| 组件基础结构 | |
| 响应式声明（依赖变化自动重算） | |
| 声明 prop（父组件传入） | |
| 事件绑定（on: 前缀） | |
| 双向绑定（表单等） |
模板语法
逻辑块用花括号。
| 命令 | 说明 |
|---|---|
| 条件渲染 | |
| 列表渲染（括号里是 key） | |
| 处理异步（await 块） | |
| 渲染原始 HTML（注意 XSS 风险） | |
| 插槽 |
状态与 Store
内置 store 机制。
| 命令 | 说明 |
|---|---|
| 可写 store | |
| 在组件里用 $ 前缀订阅；或用 set/update | |
| 派生 store（基于其它 store 计算） | |
| 只读 store | |
| 生命周期（来自 svelte） |
SvelteKit
路由与数据加载。
| 命令 | 说明 |
|---|---|
| 页面路由（+ 前缀约定文件） | |
| 服务端 load 函数（取数据） | |
| 页面加载函数 | |
| 链接与编程式导航 | |
| API 端点（导出 GET/POST） |
命令
创建与构建。
| 命令 | 说明 |
|---|---|
| 创建 SvelteKit 项目 | |
| 用 Vite 创建纯 Svelte 项目 | |
| 开发 / 构建 / 预览 | |
| 类型检查（svelte-check） |
使用说明
Svelte / SvelteKit 速查：组件与响应式、模板语法、状态与 Store、SvelteKit 路由与取数、命令；支持搜索与分类筛选，点击即可复制。
- 按用途点分类：组件与响应式、模板语法、状态与 Store、SvelteKit、命令。
- 点「命令」列复制到组件或配置中使用。
- $: 前缀声明响应式语句，依赖变化时自动重算。
- SvelteKit 用 +page.svelte 做页面，+page.server.ts 的 load 取数据。
常见问题
- Svelte 和 SvelteKit 什么关系？
- Svelte 是组件框架，SvelteKit 是搭建在 Svelte 之上的应用框架（路由、SSR、构建等）。
- $ 前缀是做什么的？
- 在组件里用 $store 自动订阅 store 的值并在变化时更新视图，无需手动 subscribe/unsubscribe。
- 需要联网吗？
- 不需要，本地检索与复制。
延伸阅读
相关工具
TKN
Tekton 速查
Task / Pipeline / PipelineRun / Trigger 速查
VGT
Vagrant 速查
vagrant up / box / synced_folder / provision 速查
VM
VictoriaMetrics 速查
victoria-metrics / vmagent / vmalert / vmctl 速查
THN
Thanos 速查
sidecar / query / store / compact 速查
OPA
OPA 速查
opa eval / Rego / allow / Gatekeeper 速查
KYV
Kyverno 速查
ClusterPolicy / validate / mutate / kyverno test 速查