注意：原文发表于2019-4-22，随着框架不断演进，部分内容可能已不适用。

原文：Svelte 3: Rethinking reactivity
作者：Rich Harris
翻译：前端子鱼
声明：转载请指明本文出处。

---

终于，尘埃落定。

历经数月之后，这几天来我们喜不自胜：我们宣布 Svelte v3 稳定版即将正式发布了。

这是一个大版本。

这次的发布，是 Svelte 社区众多贡献者耗费了数百小时的心血，包括来自 beta 版测试人员的宝贵反馈，他们聚沙成塔，众志成城，使得各项设计精益求精，日臻完善。

相信这次发布能不负众望，让你喜欢上它。

什么是 Svelte？

Svelte 是一个组件框架（就像 React 或 Vue），不过与他们又截然不同。

传统的框架也允许你编写声明式的、状态驱动的代码，不过是要付出代价的：

浏览器做了很多额外的工作，去将这些声明式的结构转换为 DOM 操作，使用 Virtual DOM 差异比较（diffing） 等这类技术，可能会超出你的设想，并且加剧垃圾回收的负担。

相反，Svelte 在执行 build 的时候，将组件转化为高效的命令式代码，并能精确地更新 DOM。

因此，你可以写出高性能且炫酷的程序。

Svelte 的首个版本完全是为了 验证这么一个假设，即通过一个专用的编译器可以生成高度可靠的代码，同时还能提供出色的用户体验。

第二版是较小的升级，稍作调整。

第三版我们进行了重大的改进。

在过去的五六个月里，我们工作的重点是在给程序员提供出色的开发体验上。

现在编写组件比起其他框架而言，样板代码少得多。

如果你使用过其他框架的话，我们认为你会被惊艳到。耳听为虚，不妨试读一下我们全新的教程，甄辨真伪。

我们首先需要反思现代 UI 框架的核心概念：响应式编程（下方是反思响应式编程的视频（建议您直接阅读本文，也即视频所讲的内容），你也可以在 You Gotta Love Frontend Code Camp 上观看）。

将响应式融入语言

在旧版的 Svelte 中，你可以通过调用 this.get 方法来告诉程序有某些状态已更改：

const { count } = this.get(); 

this.set({ count: count + 1 });

这可以让组件得到响应。

刚好说到这里顺便提一下，this.get 与经典（Hooks 之前的） React 中使用的 this.setState 方法几乎相同：

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

但有一些重要的技术差异（正如我在《反思响应式编程》的视频中解释的那样，React 不是响应式的），不过从概念上讲却是同一回事。

随着 Hooks 的降临，引起了翻天覆地的改变，Hooks 以与众不同的方式来处理 的降临，引起了翻天覆地的改变，Hooks 以与众不同的方式来处理状态。

许多框架竞相效尤，纷纷开始尝试实现自己的 Hooks，不过我们很快就当机立断：这并非完美致力的方向。

（实际上，Svelte v3 基本上是 Sunil 的错）

Hooks 有一些吸引人的特性，但是它们也包含了一些不太自然的代码，并为垃圾回收器制造了些不必要的麻烦。

对于一个用于嵌入式设备和大量动画交互的框架来说，这不是一件好事。所以我们先退后一步静心自问，什么样的 API 才适合我们……

道说：大方无隅，大音希声，大象无形……

—— 没有 API 就是最好的 API！

我们豁然开朗，我们可以凭借语言来另辟蹊径。

更新 count 的值，以及所有依赖它的东西，应该像这样轻而易举：

count += 1;

由于我们是一个编译器，因此我们可以通过在幕后检测赋值操作来实现这一点：

count += 1; 
$$invalidate('count', count);

更重要的是，我们可以在没有使用代理或者 get/set 访问器带来的开销和复杂性的情况下，实现了这些能力。

它不过是一个普通的变量而已。

焕然一新

除了编写组件的方式焕然一新外，Svelte 自身也不同往日了，拥有了全新的外观和感觉。

仰赖 Achim Vedam 出色的工作，设计了我们新的徽标和网站，并启用了新的域名 svelte.dev 代替了 svelte.technology。

我们还更改了口号，从“神奇地销声匿迹的UI框架”改成了“增强控制力的 Web APP”。

Svelte 八面玲珑 —— 出色的性能、尺寸很小的包、可访问性、内置样式封装、声明式转换、易用性以及它本质上只是一个编译器等等。

这些我们都会面面俱到，绝不厚此薄彼。

“增强控制力” 旨在升华 Svelte 的整体设计理念，即我们的工具应该为我们自身的智能扩展而存在，期望再次带火 William Gibson 风格。

从 v2 升级

如果你是 Svelte 2 的用户，那么可能要手动做一些升级。

在接下来的几天，我们将会发布迁移指南和 svelte-upgrade 的更新版本，我们将尽最大努力使得这个过程自动化。

但这毕竟是一次重大的变更，并非所有内容都能自动处理得了。

当然我们不会掉以轻心：希望你体验了 Svelte 3 之后能够明白，我们为什么认为有必要与过去决裂。

拭目以待

尽管这个版本已经够折腾的了，但我们还远未完成。

我们还有大量的想法来生成更智能、更紧凑的代码，以及一个长长的特性期望列表。

Sapper，我们一个 Next.js 风格的应用框架，目前仍处于更新迭代中，支持使用 Svelte 3。

Svelte Native 这个社区项目可以使你用 Svelte 来编写 Android 或 iOS 的 APP，该项目虽然取得了一些进展，但应该得到 core 的更全面的支持。

我们还没有其他框架那样拥有很多编辑器扩展、语法高亮、组件工具、devtool 等等，我们也应该丰富这些。

我们也确实是想添加一流的 TypeScript 支持。

与此同时，我们认为 Svelte 3 是构建 Web 应用的最佳方式。

花个把小时浏览一下我们的教程，希望能使你有所动容。

无论如何，我们都希望在 Discord 聊天室和 Github 上看到你。

欢迎每一位开发者 —— 尤其是你。

< The End >