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). Don't mix Svelte 4/5 syntax. Objects/arrays are deeply reactive by default.

选择哪个rune？ 组件属性：

$props()

| 可绑定属性：

$bindable()

| 计算属性：

$derived()

| 副作用：

$effect()

| 状态：

$state()

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

const

声明以实现只读）。不要混合使用Svelte 4/5语法。对象/数组默认是深度响应式的。

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); // 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>

Reference Files

参考文档

reactivity-patterns.md - When to use each rune
migration-gotchas.md - Svelte 4→5 translation
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
migration-gotchas.md - Svelte 4→5 迁移指南
component-api.md - $props、$bindable 使用模式
snippets-vs-slots.md - 新代码片段语法
common-mistakes.md - 反模式及修复方案

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

Notes

注意事项

Use
```
onclick
```
not
```
on:click
```
,
```
{@render children()}
```
in layouts
```
$derived
```
can be reassigned (5.25+) - use
```
const
```
for read-only
Last verified: 2025-01-11

使用
```
onclick
```
而非
```
on:click
```
，在布局中使用
```
{@render children()}
```
$derived可以被重新赋值（5.25+版本）- 使用
```
const
```
声明以实现只读
最后验证时间： 2025-01-11