【官方博文】Svelte 5 正式发布

经过将近 18 个月的开发，包括数十位贡献者的数千次提交，Svelte 5 终于稳定了。

这是该项目历史上最重要的一次发布。Svelte 5 是一次彻底的重写：你的应用程序将更快、更小且更可靠。你将能够编写更一致且更符合习惯用法的代码。对于该框架的新手来说，需要学习的东西更少了。

尽管如此，Svelte 几乎与 Svelte 4 完全向后在这里插入代码片兼容 —— 对于大多数用户来说，最初的升级将完全无缝进行。

{
    "devDependencies": {
        "@sveltejs/vite-plugin-svelte": "^3.0.0",
        "svelte": "^4",
        "@sveltejs/vite-plugin-svelte": "^4.0.0",
        "svelte": "^5",
        // …
    }
}

Svelte 是什么？

Svelte 是一个用于在网络上构建用户界面的框架。它使用编译器将基于 HTML、CSS 和 JavaScript 的声明式组件代码转换为经过高度优化的 JavaScript。

由于编译器将大量工作从浏览器转移到 “npm run build”，Svelte 应用程序既小巧又快速。除此之外，Svelte 被设计为一种令人愉快且直观的构建应用程序的方式：它优先考虑完成任务。

Svelte 的开发团队还维护着 SvelteKit，这是一个应用框架，它处理路由、数据加载、服务器端渲染以及构建现代网站和应用程序所涉及的所有复杂细节。
我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：

什么改变了，以及为什么改变？

首先，我们已经彻底检修了我们的网站。你可以在这里阅读更多相关内容。

至于 Svelte 本身，我们将首先解释为什么改变。我们不喜欢为了改变而改变——事实上，在 2019 年（我们推出 Svelte 3 时）到现在这段时间里，Svelte 的变化比任何其他主要框架都要小，而在前端开发领域，这段时间可谓漫长。并且人们真的很喜欢 Svelte 3 和 Svelte 4——它在开发者满意度调查中经常名列前茅。

所以当我们做出改变时，我们不会轻易去做。

随着越来越多的人使用 Svelte 构建更多更大的应用程序，我们一些最初设计决策的局限性开始变得更加明显。例如，在 Svelte 4 中，响应性完全由编译器驱动。如果你在 Svelte 4 中更改一个响应对象的单个属性，整个对象就会失效，因为这是编译器实际上所能做的一切。与此同时，其他框架已经采用了基于信号¹的细粒度响应性，超越了 Svelte 的性能。

同样，在 Svelte 4 中组件本应该更容易进行组合，很大程度上是因为它将事件处理程序(event handlers)和“插槽内容(slotted content)”视为独立的概念，与传递给组件的属性不同。这是因为在 2019 年，网络组件(web components)似乎很可能成为组件的主要分发机制，并且我们希望与该平台保持一致。这是一个错误。

虽然使用$:构造一个响应式可重新渲染的声明变量是一个巧妙的技巧，但结果却成为一个隐患。它将两个概念（派生状态(derived state)和副作用(side-effects)）混为一谈，而这两个概念实际上应该分开。并且由于依赖关系是在语句编译时确定的（而不是在运行时确定），它阻碍了重构并引入了大量的复杂性。

Svelte 5 消除了这些不一致性和容易犯错的地方。它引入了runes，这是一种明确的机制，用于（其中包括）声明响应式状态。

let count = $state(0);

与状态进行交互的方式没有改变：在 Svelte 中，与其他框架不同，“count” 仅仅是一个数字，而不是一个函数，也不是具有 “value” 属性的对象，或者不是只能通过相应的 “setCount” 来进行改变的东西。

function increment() {
	count += 1;
	console.log({ count });
}

runes可以在.svelte.js 和.svelte.ts 模块以及.svelte 组件中使用，这意味着你可以使用单一机制创建可复用的响应式逻辑。

事件处理程序现在就像其他任何属性一样，（例如）这使得很容易知道组件的用户是否提供了特定的事件处理程序（这对于避免昂贵的设置工作很有用），或者将任意事件处理程序传播到某个元素上 —— 这些对于库作者来说尤其重要。

并且在组件之间传递内容的插槽(slot)机制（连同令人困惑的 let: 和 <svelte:fragment> 语法）已被 {#snippet …} 所取代，这是一个更强大的工具。

在这些变化之外还有无数的改进：原生的 TypeScript 支持（不再需要预处理器！）、许多错误修复以及全面的性能和可扩展性改进。

---

1. 这应该是指React的hook 和 solidJS的 signal ↩︎