svelte 4 到 svelte 5 的迁移

[jsiwa]

快速了解从 Svelte 4 到 Svelte 5 的主要变化和迁移注意事项：

---

1. 响应式机制：从隐式到显式

Svelte 4 的方式：

• 你只需要在脚本中写上 $: 声明即可实现响应式更新。例如：

  <script>
    let count = 0;
    $: double = count * 2;
  </script>
  <button on:click={() => count++}>
    count: {count}, double: {double}
  </button>

  这种方式比较隐式，系统自动检测依赖关系。

Svelte 5 的变化：

• 引入了全新的“符文（Runes）”系统，要求你以更明确的方式声明响应式状态和派生状态。主要 API 包括：
  • $state: 显式声明一个响应式状态，例如：

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

  • $derived: 用于创建依赖其他状态计算出的派生值，替代之前的 $: 语法：

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

  • $effect: 专门用于处理副作用（如日志记录、API 调用等），可以在依赖变化时自动执行：

    <script>
      let count = $state(0);
      $effect(() => {
        console.log(`count changed: ${count}`);
      });
    </script>

• 这种方式让状态的声明和依赖关系更加显式，便于理解和调试。

---

2. 事件绑定和组件交互

Svelte 4 的方式：

• 事件绑定一般使用 on:click 这类指令，同时组件间常用 createEventDispatcher 来传递事件。

Svelte 5 的变化：

• 推荐使用标准的 HTML 事件绑定方式，如直接使用 onclick。例如：

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

• 此外，组件之间的事件传递也改为直接通过回调属性传递，不再依赖 createEventDispatcher，这样使得事件处理逻辑更符合常规 DOM 的习惯。

---

3. 模板语法的新特性：代码片段（Snippets）

Svelte 5 引入了全新的语法块：

• 你可以通过 {#snippet} 定义一段可重用的模板代码，然后用 {@render} 来调用。例如：

  {#snippet greeting}
    <p>你好，Svelte！</p>
  {/snippet}
  
  {#if true}
    {@render greeting}
  {/if}

• 这种方式能够使组件内部重复使用相同的标记更加方便，降低代码冗余。

---

4. TypeScript 支持的增强

Svelte 5 在 TypeScript 方面做了不少改进：

• 新的符文 API 都有完善的类型定义，不再需要额外的预处理器来支持 TS。
• 例如，你可以通过 $props 显式声明组件属性并指定类型：

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

• 这使得在开发过程中可以更好地获得类型检查和智能提示，降低出错风险。

---

5. 其他重要变更和迁移注意事项

• 统一语法：
  虽然 Svelte 5 仍然支持旧的 Svelte 4 语法，但如果你决定采用新符文系统，一个组件内的所有响应式相关代码都需要切换到新语法，不能混用。

• 迁移工具：
  官方提供了自动迁移工具（例如 npx sv migrate svelte-5），可以帮助你自动转换部分代码。但由于项目中可能涉及 TypeScript 或较复杂的配置，部分细节仍需手动调整。

• 局部更新和优化：
  Svelte 5 在内部优化了响应式更新的粒度，并提供了诸如 $state.frozen（声明不可变状态）和 $state.snapshot（生成状态快照）的新方法，有助于提升性能和调试效率。

• 过渡动画和自定义元素：
  例如，转场动画现在默认是“本地”的（只在直接创建或销毁的控制流块中播放），而自定义元素的配置也从 tag 选项改为 customElement 选项。这些变化都在官方指南中有详细说明。

---

结语

从 Svelte 4 迁移到 Svelte 5 的主要变化可以归纳为以下几点：

1. 响应式系统革新： 使用显式的符文 API（如 $state、$derived、$effect）取代了隐式的 $: 声明，使状态管理更明确、更易调试。
2. 事件绑定更新： 采用标准 HTML 的事件绑定方式，并通过回调属性处理组件间交互，简化了事件处理逻辑。
3. 新增模板语法： 引入了代码片段（Snippets）语法，方便复用组件中的标记。
4. 更好的 TypeScript 支持： 全面的类型定义降低了开发出错风险，提升了开发体验。
5. 其它细节更新： 包括动画、过渡、自定义元素配置等多处调整，整体提升了框架性能和一致性。

你可以访问官方的 [Svelte 5 迁移指南](https://svelte.dev/docs/svelte/v5-migration-guide) 查看更详细的信息和示例。

[jsiwa]

Svelte 5 和 Svelte 4的核心区别：

---

1. 响应式系统的革新：从隐式到显式

• Svelte 4：
  响应式依赖编译器自动追踪变量变化，通过 $: 语法标记派生状态或副作用。例如：

  <script>
    let count = 0;
    $: doubled = count * 2; // 自动追踪 count 的变化
  </script>

  但这种方式在深层对象属性修改或复杂逻辑中可能失效，且依赖关系在编译时确定，难以重构。

• Svelte 5：
  引入 Runes（符文） 机制，通过显式声明响应式变量：

  • $state：声明响应式状态（如 let count = $state(0)）；
  • $derived：声明派生值（如 let doubled = $derived(count * 2)）；
  • $effect：处理副作用（如 DOM 操作）。
    这种机制更接近现代框架（如 Vue 3 或 SolidJS）的细粒度响应式，代码更清晰且性能更高。

---

2. 组件与插槽的改进：更灵活的组合

• Svelte 4：
  使用 <slot> 和 <slot name="xxx"> 处理插槽，事件通过 on:click 绑定，但这些设计在复杂场景中显得笨拙。

• Svelte 5：

  • 插槽：废弃 <slot>，改用 {#snippet} 和 {@render} 语法，支持条件渲染和更灵活的内容传递：

    <!-- 父组件 -->
    <Child>
      {#snippet myslot}<div>内容</div>{/snippet}
    </Child>
    <!-- 子组件 -->
    {@render myslot?.()}

  • 事件：弃用 on:click，改为直接使用原生 onclick，事件修饰符（如 once）需手动实现，更贴近原生开发体验。

---

3. API 与生命周期的简化

• Svelte 4：
  依赖 onMount、afterUpdate 等生命周期函数，副作用和状态更新混杂在 $: 中，容易导致代码混乱。

• Svelte 5：

  • 统一生命周期：用 $effect 替代 $: 和生命周期函数，例如：

    $effect(() => {
      console.log("组件挂载或状态更新后执行");
    });

  • 新 API：如 $state.frozen（冻结不可变数据）、$inspect（调试状态变化）等，提升开发效率。

---

4. 性能与兼容性提升

• 性能优化：
  Svelte 5 通过细粒度响应式减少了不必要的更新，编译后的代码更小、运行更快。
• 向后兼容：
  支持与 Svelte 4 组件共存，但单个组件内需统一使用新旧语法。官方提供迁移工具（如 npx sv migrate），但 TypeScript 支持尚不完善。

---

5. 其他改进

• 原生 TypeScript 支持：无需预处理器，直接使用 .svelte.ts 文件。
• 更直观的 Props 处理：通过 $props() 解构属性，支持默认值和类型声明。

---

总结对比表

特性	Svelte 4	Svelte 5
响应式	隐式（$: 语法）	显式（$state, $derived）
插槽	<slot> 和 slot="name"	{#snippet} 和 {@render}
事件绑定	on:click + 修饰符	原生 onclick + 手动实现修饰符
副作用处理	onMount, afterUpdate	$effect 统一管理
性能	依赖编译器优化	细粒度响应式，体积更小、速度更快

---

[jsiwa]

context="module" is deprecated, use the module attribute instead

before

<script context="module" lang="ts">
export type PriceRank = [string, [number, number]][]
</script>

now

<script module lang="ts">
export type PriceRank = [string, [number, number]][]
</script>