作者：@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 则允许在状态变化时运行代码，例如渲染到
信号和细粒度响应性
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
{#each items as item}
{@render row(item)}
{/each}
{#snippet row(item)}
{item.name}:
${item.price.toFixed(2)}
{/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 阅：了解技术资讯的一种方式。
🚀可直接查看原文了解详细内容。
