【早阅】Svelte 5 新功能

作者：@alicemoore、@Rich Harris
原文：https://vercel.com/blog/whats-new-in-svelte-5

今天2024.10.26 重庆市・渝北区・两江软件园・海王星数字文创园（5 楼） 期待与你相见！

背景

Svelte 5 是 Svelte 框架的最新版本，带来了许多令人兴奋的新特性和改进。Svelte 以其编译器优先的方法、细粒度的响应性和与任何 JavaScript 项目的集成能力而闻名，这些特性使其在众多前端框架中脱颖而出。Svelte 5 的发布进一步巩固了其在现代 Web 开发中的地位，特别是在响应性管理和代码优化方面。

要点

Svelte 5 引入了几个关键的新特性，包括：

• Runes：用于管理响应性的新符号，提供了对应用程序状态的显式控制。

• Snippets：允许在组件内定义可重用的标记和逻辑块，简化了代码的复用和维护。

• 编译器改进：进一步优化了性能，减少了包大小，并简化了开发流程。

分析

Runes

Svelte 5 引入的 Runes 是响应性管理的核心。这些符号（如 $state、$derived 和 $effect）提供了简洁的方式来管理状态及其依赖关系。

例如，$state 声明了一个响应式变量，取代了 Svelte 4 中的顶层 let 声明。每当 $state 变量的值发生变化时，Svelte 会自动更新其在组件中的任何使用，从而消除了手动更新的需求，简化了状态管理。

$derived 创建基于其他 $state 或 $derived 值的响应式值。当依赖项发生变化时，Svelte 会标记 $derived 值以在下次读取时重新计算，确保一致性并简化复杂计算。

$effect 则允许在状态变化时运行代码，例如渲染到 <canvas> 或与外部库交互。

信号和细粒度响应性

Runes（如 $state 和 $derived）允许直接使用响应式值，而 Svelte 的编译器处理底层的信号管理。例如，在 Svelte 5 中编写一个计数器组件非常简单：

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

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

使用 .svelte.js 文件实现通用响应性

通过 .svelte.js 和 .svelte.ts 文件，可以在一个地方定义共享状态和逻辑，并使用 Runes 从任何组件访问它。这消除了 prop drilling，简化了复杂的 store 设置，减少了模版代码，并提高了代码可维护性。

Snippets

Snippets 是 Svelte 5 的另一个重要特性，允许开发者定义可重用的标记和逻辑块。这些片段可以在组件内多次渲染，也可以作为 props 传递给其他组件。例如，一个列表组件可以通过传递不同的片段来渲染不同的列表项样式，而无需修改其内部结构。

让我们看一个例子：

 // App.svelte
 <script>
   let items = [
     { id: 1, name: 'Apple', price: 0.5 },
     { id: 2, name: 'Banana', price: 0.25 },
     { id: 3, name: 'Orange', price: 0.75 },
   ];
 </script>

 <ul>
   {#each items as item}
     {@render row(item)}
   {/each}
 </ul>

 {#snippet row(item)}
   <li>
     <span>{item.name}:</span>
     <span>${item.price.toFixed(2)}</span>
   </li>
 {/snippet}

在此示例中，我们定义了一个 row 片段，它封装了列表中每个项目的标记。然后使用 {#each} 块中的 {@render} 标记为每个项目渲染片段。

片段也可以作为 props 传递给其他组件：

 // App.svelte

 <script>
   import ItemList from './ItemList.svelte';
   let items = [
     { id: 1, name: 'Apple', price: 0.5 },
     { id: 2, name: 'Banana', price: 0.25 },
     { id: 3, name: 'Orange', price: 0.75 },
   ];
 </script>

 <ItemList {items}>
   // 隐式地将此片段作为 prop 传递。
   {#snippet row(item)}
     <li>
       <span>{item.name}:</span>
       <span>${item.price.toFixed(2)}</span>
     </li>
   {/snippet}
 </ItemList>

 // ItemList.svelte
 <script>
   let { row, items } = $props();
 </script>

 {#each items as item}
   {@render row(item)}
 {/each}

在这种情况下，我们将 row 片段从 App.svelte 传递给 ItemList.svelte。这种关注点分离使得在不修改其内部结构的情况下，可以很容易地使用不同的项目渲染样式重用 ItemList 组件。

编译器改进

Svelte 一直以其编译器优先的方法著称，将大部分工作转移到编译时，从而生成高度优化的 vanilla JavaScript。Svelte 5 在此基础上进一步优化了性能，减少了包大小，并简化了开发流程。组件现在被编译为普通的 JavaScript 函数，这使得构建工具和 JavaScript 引擎能够更有效地优化它们。

Svelte 5 在此基础上进行了编译器改进，以提高性能、减小捆绑包大小和简化开发。

将组件作为函数

在 Svelte 5 中，组件现在是普通的 JavaScript 函数。这简化了优化，因为构建工具和 JavaScript 引擎可以有效地优化函数。例如，函数组件可以内联到其调用者中，从而减少开销。

Svelte 是第一个组件直接相互调用的主要框架，消除了中间函数或複杂的组件创建机制。这有助于 Svelte 的性能和出色的 Core Web Vital 分数。

原生 TypeScript 支持

Svelte 5 引入了原生 TypeScript 支持。以前的版本使用预处理器，这增加了移动部件（如 source map）并减慢了构建速度。

原生 TypeScript 支持意味著更快的构建速度，并且能够直接在 Svelte 标记中使用 TypeScript 注释，例如在内联事件处理程序中。

结合新的事件处理方法和使用符文简化的状态管理，使开发和库创作变得更加容易。

影响

Svelte 5 的发布对前端开发社区产生了深远的影响。首先，它进一步简化了响应式状态的管理，使得开发者能够更专注于业务逻辑而非状态管理的复杂性。其次，Snippets 的引入提高了代码的可重用性和可维护性，减少了重复代码的编写。最后，编译器的改进使得 Svelte 组件在任何 JavaScript 项目中都能更高效地运行，进一步提升了其在现代 Web 开发中的竞争力。

结论

Svelte 5 的发布标志着 Svelte 框架在响应性管理和代码优化方面的又一次飞跃。通过引入 Runes 和 Snippets，Svelte 5 不仅简化了开发流程，还提高了代码的可维护性和可重用性。随着越来越多的公司和开发者采用 Svelte，其在现代 Web 开发中的地位将更加稳固。未来，我们可以期待 Svelte 继续引领前端框架的发展，为开发者提供更强大、更高效的工具。

AI 阅：了解技术资讯的一种方式。

🚀可直接查看原文了解详细内容。