Svelte 5 的主要语法变化和相关特性速览

各位道友好，我是星辰编程理财，我的iStock Shell项目正在从Svelte 4迁移到Svelte 5，借此介绍下Svelte 5。

Svelte 5 是一个重要的版本更新，引入了许多新特性和语法改进，尤其是在响应式编程和组件开发方面。以下是 Svelte 5 的主要语法变化和相关特性：

1. Runes（符文）

Runes 是 Svelte 5 的核心特性，用于显式声明响应式状态、派生状态和副作用。它们以 $ 开头，提供了更清晰和灵活的响应式编程方式。

$state
用于声明响应式状态。与 Svelte 4 的隐式响应式不同，$state 是显式的，可以在任何地方使用，而不仅限于组件顶层。
```
<script>
  let count = $state(0); // 显式声明响应式状态
</script>
<button on:click={() => count++}>Count: {count}</button>
```

$derived
用于声明派生状态，替代 Svelte 4 的 $: 语法。$derived 确保派生值始终与依赖的状态同步。

<script>
  let count = $state(0);
  let doubled = $derived(count * 2); // 派生状态
</script>
<p>Doubled: {doubled}</p>

$effect
用于处理副作用，替代 Svelte 4 的 $: 副作用语法。$effect 在组件挂载或依赖状态变化时运行。
```
<script>
  let count = $state(0);
  $effect(() => {
    console.log(`Count changed to ${count}`);
  });
</script>
```

$props
用于声明组件属性，替代 Svelte 4 的 export let 语法。$props 支持解构和默认值。

<script>
  let { name = "Guest" } = $props(); // 声明属性并设置默认值
</script>
<p>Hello, {name}!</p>

$inspect
用于调试，当依赖的状态变化时自动打印日志。

<script>
  let count = $state(0);
  $inspect(count); // 当 count 变化时打印日志
</script>

Svelte 5 对事件处理进行了简化，弃用了 createEventDispatcher 和 on: 指令，改用回调属性。

回调属性
事件处理程序现在作为普通属性传递。

<script>
  let count = $state(0);
  function handleClick() {
    count++;
  }
</script>
<button onclick={handleClick}>Click me</button>

事件冒泡
事件可以通过回调属性直接传递，无需显式转发。

<script>
  let { onclick } = $props();
</script>
<button onclick={onclick}>Click me</button>

Svelte 5 引入了 {#snippet} 语法，用于在组件内创建可重用的标记块。

定义和使用代码片段

<script>
  let name = "Svelte";
</script>

{#snippet greeting}
  <p>Hello, {name}!</p>
{/snippet}

{#if true}
  {@render greeting}
{/if}

Svelte 5 提供了更好的 TypeScript 支持，不再需要预处理器。所有符文和 API 都与 TypeScript 完全兼容。

类型化的 $props

<script lang="ts">
  let { name = "Guest" }: { name?: string } = $props();
</script>

Svelte 5 仍然支持 Svelte 4 的语法，但建议逐步迁移到新语法。官方提供了迁移脚本和详细的迁移指南。

Svelte 5 引入了细粒度的响应式系统，基于信号的机制使得性能更高，尤其是在大型应用中。

$state.frozen
用于声明不可变的状态，避免不必要的响应式开销。
```
<script>
  let data = $state.frozen([1, 2, 3]);
</script>
```
$state.snapshot
用于创建响应式状态的静态快照，适合传递给外部库。

Svelte 5 通过符文系统、改进的事件处理和更好的 TypeScript 支持，显著提升了开发体验和性能。如果你正在使用 Svelte 4，可以参考官方迁移指南逐步升级。