Svelte 5 组件示例

MDsveX 让你在 Markdown 里直接嵌入 Svelte 组件逻辑。下面所有示例都是真实可交互的，代码就写在这篇文章的源文件里。

$state — 响应式状态

最基础的原语，声明一个响应式变量：

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>点击了 {count} 次</button>

实际效果：

---

$derived — 派生状态

$derived 根据其他状态自动计算，无需手动维护同步：

<script>
  let count = $state(0);
  const doubled = $derived(count * 2);
</script>

<p>count = {count}，doubled = {doubled}</p>

实际效果：

---

双向绑定

bind:value 将输入与状态绑定，$derived 实时跟随：

<script>
  let name = $state('世界');
  const greeting = $derived(`你好，${name}！`);
</script>

<input bind:value={name} />
<p>{greeting}</p>

实际效果：

---

列表与动态渲染

使用 {#each} 遍历数组，配合 $state 实现增删：

<script>
  let items = $state(['苹果', '香蕉', '橙子']);
  let newItem = $state('');

  function addItem() {
    if (newItem.trim()) {
      items = [...items, newItem.trim()];
      newItem = '';
    }
  }
</script>

{#each items as item, i (item)}
  <li>
    {item}
    <button onclick={() => items = items.filter((_, j) => j !== i)}>删除</button>
  </li>
{/each}

实际效果：

---

小结

原语	用途
$state	声明响应式变量
$derived	基于其他状态计算派生值
$effect	状态变化时执行副作用
$props	声明组件接收的属性

Svelte 5 的 Runes 相比 Svelte 4 的隐式响应式，让数据流更加显式且可追踪。无论是组件内部状态还是跨组件传递，都遵循相同的原语体系。