Svelte 3：重新思考响应式

在经过几个月的”即将发布”后，我们非常兴奋地宣布 Svelte 3 的稳定版本发布。这是一个重大的版本更新，凝聚了 Svelte 社区众多成员数百小时的工作成果，包括 beta 测试者在整个过程中提供的宝贵反馈，这些反馈帮助塑造了每一步的设计。

我们相信你会喜欢它。

Svelte 是什么？

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

相反，Svelte 在构建时运行，将你的组件转换为高效的命令式代码，精确地更新 DOM。因此，你能够编写具有出色性能特征的雄心勃勃的应用程序。

Svelte 的第一个版本主要是为了测试一个假设——一个专门构建的编译器可以生成稳固的代码，提供出色的用户体验。第二个版本是一次小规模的升级，对一些内容进行了整理。

第三版是一次重大改进。在过去的五六个月里，我们的重点是提供出色的开发者体验。现在可以用明显更少的样板代码编写组件，比其他地方要少得多。尝试全新的教程，看看我们的意思——如果你熟悉其他框架，我们认为你会感到惊喜。

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

将响应式移入语言本身

在旧版 Svelte 中，你需要通过调用 this.set 方法来告诉计算机某个状态已经改变：

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

这会导致组件产生反应。说到这里，this.set 几乎与经典（hooks 之前）React 中使用的 this.setState 方法相同：

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

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

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

所以我们退后一步，问自己什么样的 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);

重要的是，我们可以在不使用代理或访问器的情况下完成所有这些工作，避免了相关的开销和复杂性。它就是一个普通的变量。

新的外观

不仅仅是你的组件获得了新面貌。Svelte 本身也有了全新的外观和感觉，这要归功于Achim Vedam的出色设计工作，他创建了我们的新标志和网站，网站已从svelte.technology迁移到svelte.dev。

我们还更改了我们的标语，从”会神奇消失的 UI 框架”变成了”控制论增强的网络应用”。Svelte 有许多方面——出色的性能、小巧的打包体积、可访问性、内置的样式封装、声明式过渡、易用性、它是一个编译器等等——关注其中任何一个方面都感觉对其他方面不公平。”控制论增强”旨在唤起 Svelte 的总体理念，即我们的工具应该作为我们自身的智能扩展来工作——希望带有一丝复古的威廉·吉布森式的韵味。

从版本 2 升级

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

我们并不轻视这一点：希望一旦你体验了 Svelte 3，你就会理解为什么我们觉得有必要与过去决裂。

未来展望

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

但同时，我们认为 Svelte 3 是目前构建网络应用的最佳方式。花一个小时完成教程，我们希望能说服你也这么认为。无论如何，我们都很希望在我们的 Discord 聊天室和 GitHub 上见到你——所有人都受欢迎，尤其是你。