Svelte 3：重新思考响应式

经过几个月的“即将发布”，我们非常高兴地宣布 Svelte 3 的稳定版本正式发布。这是一个重大的版本，代表着 Svelte 社区许多人投入的数百小时工作，包括来自测试版用户的宝贵反馈，他们帮助塑造了每一个设计阶段。

我们认为您会爱上它。

什么是 Svelte？

Svelte 是一种组件框架——类似于 React 或 Vue——但有一个重要的区别。传统的框架允许您编写声明式状态驱动的代码，但存在代价：浏览器必须做额外的工作才能将这些声明式结构转换为 DOM 操作，使用诸如虚拟 DOM 差异化之类的技术，这些技术会占用您的帧预算并增加垃圾回收器的负担。

相反，Svelte 在构建时运行，将您的组件转换为高效的命令式代码，从而精确地更新 DOM。因此，您可以构建具有出色性能特征的复杂应用程序。

Svelte 的第一个版本完全是为了验证一个假设——一个专门构建的编译器可以生成可靠的代码，并提供出色的用户体验。第二个版本是一个小的升级，对代码进行了整理。

版本 3 是一个重大的改进。在过去五到六个月里，我们的重点一直放在提供出色的开发人员体验上。现在，您可以使用比其他地方少得多的样板代码来编写组件。尝试全新的教程，看看我们的意思——如果您熟悉其他框架，我们认为您会感到惊喜。

为了实现这一点，我们首先需要重新思考现代 UI 框架的核心概念：响应式。

将响应式引入语言

在旧版本的 Svelte 中，您可以通过调用 this.set 方法来告诉计算机某个状态发生了变化。

const { const count: anycount } = this.get();
this.set({
	count: anycount: const count: anycount + 1
});

这将导致组件做出反应。说到这里，this.set 几乎与经典（钩子之前的）React 中使用的 this.setState 方法相同。

const { const count: anycount } = this.state;
this.setState({
	count: anycount: const count: anycount + 1
});

存在一些重要的技术差异（正如我在上面的视频中解释的那样，React 不是响应式的），但在概念上它们是相同的。

这一切都随着钩子的出现而改变，钩子以非常不同的方式处理状态。许多框架开始尝试自己实现钩子，但我们很快得出结论，这不是我们想要的方向。钩子有一些有趣的特性，但它们也涉及一些不自然的代码，并为垃圾回收器增加了不必要的工作。对于一个在嵌入式设备以及动画密集型交互中使用的框架来说，这并不好。

因此，我们退一步，问自己什么样的 API 对我们有用……并意识到最好的 API 就是根本没有 API。我们可以使用语言本身。更新某个 count 值——以及所有依赖它的东西——应该像这样简单

let count: numbercount += 1;

由于我们是编译器，因此可以通过在后台检测赋值来做到这一点。

let count: numbercount += 1;
const $$invalidate: <number>(name: string, value: number) => undefined$$invalidate('count', let count: numbercount);

重要的是，我们可以在不使用代理或访问器带来的开销和复杂性的情况下完成所有这些操作。它只是一个变量。

新外观

您的组件不是唯一获得改头换面的东西。感谢Achim Vedam的出色设计工作，Svelte 本身拥有全新的外观和感觉，他创建了我们的新徽标和网站，该网站已从svelte.technology迁移到svelte.dev。

我们还更改了我们的标语，从“神奇消失的 UI 框架”到“网络增强型 Web 应用程序”。Svelte 拥有许多方面——出色的性能、小型包、可访问性、内置样式封装、声明式过渡、易用性、它是编译器的事实等等——专注于其中任何一个都感觉对其他方面不公平。“网络增强型”旨在唤起 Svelte 的总体理念，即我们的工具应该作为我们自己的智能扩展——希望带有复古的威廉·吉布森风格。

从版本 2 升级

如果您是现有的 Svelte 2 用户，恐怕需要进行一些手动升级。在接下来的几天里，我们将发布迁移指南和svelte-upgrade的更新版本，它将尽其所能自动执行此过程，但这确实是一个重大的变化，并非所有内容都可以自动处理。

我们不会掉以轻心：希望一旦您体验过 Svelte 3，您就会理解为什么我们认为有必要与过去断绝关系。

即将推出

尽管此次发布非常艰辛，但我们远未完成。我们有大量想法来生成更智能、更紧凑的代码，以及一个很长的功能愿望清单。Sapper，我们的 Next.js 风格的应用程序框架，仍在更新以使用 Svelte 3。允许您使用 Svelte 编写 Android 和 iOS 应用程序的Svelte Native 社区项目正在稳步发展，但应获得核心团队的更多支持。我们还没有其他框架拥有的丰富的编辑器扩展、语法高亮显示、组件工具包、开发者工具等等，我们应该解决这个问题。我们真的希望添加一流的 TypeScript 支持。

但与此同时，我们认为 Svelte 3 是迄今为止构建 Web 应用程序的最佳方式。花一个小时浏览教程，我们希望说服您这一点。无论如何，我们都希望在我们的Discord 聊天室和GitHub上见到您——欢迎所有人，尤其是您。