svelte-runes

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Svelte Runes

Quick Start

快速开始

Which rune? Props:

$props()

| Bindable:

$bindable()

| Computed:

$derived()

| Side effect:

$effect()

| State:

$state()

Key rules: Runes are top-level only. $derived can be overridden (use

const

for read-only). Objects/arrays are deeply reactive by default; use

$state.raw

for large data replaced wholesale.

选择哪个Rune？ Props:

$props()

| 可绑定:

$bindable()

| 计算属性:

$derived()

| 副作用:

$effect()

| 状态:

$state()

核心规则： Runes只能在顶层使用。$derived可以被重写（使用

const

定义只读属性）。对象/数组默认是深度响应式的；对于需要整体替换的大型数据，请使用

$state.raw

。

Example

示例

svelte

<script>
	let count = $state(0); // Mutable state
	const doubled = $derived(count * 2); // Computed (const = read-only)

	$effect(() => {
		console.log(`Count is ${count}`); // Side effect
	});
</script>

<button onclick={() => count++}>
	{count} (doubled: {doubled})
</button>

svelte

<script>
	let count = $state(0); // 可变状态
	const doubled = $derived(count * 2); // 计算属性（const = 只读）

	$effect(() => {
		console.log(`Count is ${count}`); // 副作用
	});
</script>

<button onclick={() => count++}>
	{count} (doubled: {doubled})
</button>

Reference Files

参考文件

reactivity-patterns.md - When to use each rune
component-api.md - $props, $bindable patterns
snippets-vs-slots.md - New snippet syntax
common-mistakes.md - Anti-patterns with fixes

For
@attach
and other template directives, see the svelte-template-directives skill.

reactivity-patterns.md - 何时使用各个Rune
component-api.md - $props、$bindable 使用模式
snippets-vs-slots.md - 新的代码片段语法
common-mistakes.md - 反模式及修复方案

关于
@attach
和其他模板指令，请查看 svelte-template-directives技能文档。

Notes

注意事项

Use event properties like
```
onclick
```
, and
```
{@render children()}
```
in layouts
```
$derived
```
can be reassigned (5.25+) - use
```
const
```
for read-only
Use
```
createContext
```
over
```
setContext
```
/
```
getContext
```
for type safety
Use
```
$inspect.trace
```
to debug reactivity issues
Prefer
```
$derived.by
```
for multi-line derivations
Avoid state updates inside
```
$effect
```
; effects are an escape hatch
Effects do not run on the server; don't wrap effect bodies in
```
if (browser)
```
Last verified: 2026-05-14

在布局中使用
```
onclick
```
等事件属性，以及
```
{@render children()}
```
语法
$derived可被重新赋值（5.25+版本）- 使用
```
const
```
定义只读属性
为保证类型安全，优先使用
```
createContext
```
而非
```
setContext
```
/
```
getContext
```
使用
```
$inspect.trace
```
调试响应式问题
多行推导优先使用
```
$derived.by
```
避免在
```
$effect
```
内更新状态；副作用是一种兜底方案
副作用不会在服务器端运行；无需用
```
if (browser)
```
包裹副作用代码
最后验证时间： 2026-05-14