Svelte 3：反思响应式编程
Posted 前端子鱼
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Svelte 3：反思响应式编程相关的知识，希望对你有一定的参考价值。
注意：原文发表于2019-4-22，随着框架不断演进，部分内容可能已不适用。
历经几个月后，才过了没几天，我们非常高兴地宣布 Svelte v3 稳定版要正式发布了。
这是一个大版本。
这次的发布，是 Svelte 社区众多贡献者耗费了数百小时的心血，包括来自 beta 版测试人员的宝贵反馈，他们聚沙成塔，众志成城，使得各项设计精益求精，日臻完善。
相信这次发布会不负众望，让你能喜欢它。
Svelte 是一个组件框架（就像 React 或 Vue），不过有一个重要的区别。
传统的框架也允许你编写声明式的、状态驱动的代码，不过是要付出代价的：
浏览器做了很多额外的工作，去将这些声明式的结构转换为 DOM 操作，使用 等这类技术，可能会超出你的设想，并且加剧垃圾回收的负担。
相反，Svelte 在执行 build 的时候，将组件转化为高效的命令式代码，并能精确地更新 DOM。
因此，你可以写出高性能的炫酷的程序。
Svelte 的首个版本完全是为了，即通过一个专用的编译器可以生成高度可靠的代码，同时还能提供出色的用户体验。
第二版是较小的升级，稍作调整。
第三版我们进行了重大的改进。
在过去的五六个月里，我们工作的重点是在给程序员提供出色的开发体验上。
现在编写组件比起其他框架而言，样板代码少得多。
试读一下全新的教程（https://svelte.dev/tutorial），去尝试了解我所说的这些。如果你熟悉其他框架的话，我们认为你会被惊艳到。
为此，我们首先需要反思现代 UI 框架的核心概念：响应式编程（反思响应式编程视频：https://www.youtube-nocookie.com/embed/AdNJ3fydeao，也可以看 You Gotta Love Frontend Code Camp ：https://www.israel.yglfconf.com）。
在旧版的 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 的降临（https://reactjs.org/docs/hooks-intro.html），引起了翻天覆地的改变，Hooks 以与众不同的方式来处理状态。
许多框架竞相效尤，纷纷开始尝试实现自己的 Hooks，不过我们很快就当机立断：这并非完美致力的方向。
（实际上，Svelte v3 基本上是 Sunil 的错：https://twitter.com/threepointone/status/1057179801109311488）
Hooks 有一些吸引人的特性，但是它们也包含了一些不太自然的代码，并为垃圾回收器制造了些不必要的麻烦。
对于一个用于嵌入式设备（https://mobile.twitter.com/sveltejs/status/1088500539640418304）和大量动画交互的框架来说，这不是一件好事。所以我们先退后一步静心自问，什么样的 API 才适合我们……
道说：大方无隅，大音希声，大象无形……
没有 API 就是最好的 API ！
我们豁然开朗 —— 我们可以凭借语言另辟蹊径。
更新 count 的值，以及所有依赖它的东西，应该像这样轻而易举：
count += 1;由于我们是一个编译器，因此我们可以通过在幕后检测赋值操作来实现这一点：
count += 1; $$invalidate('count', count);更重要的是，我们可以在没有使用代理或者 get/set 访问器带来的开销和复杂性的情况下，实现了这些能力。
它就是一个简简单单的变量而已。
除了编写组件的方式焕然一新外，Svelte 自身也不同往日了，拥有了全新的外观和感觉。
全靠 Achim Vedam（https://vedam.de）出色的工作，设计了我们新的徽标和网站，并启用了新的域名 svelte.dev 代替了 svelte.technology。
我们还更改了口号，从“神奇地销声匿迹的UI框架”改成了“增强控制力的 Web APP”。
Svelte 八面玲珑 —— 出色的性能、尺寸很小的包、可访问性、内置样式封装、声明式转换、易用性以及它本质上只是一个编译器等等。
这些我们都会面面俱到，绝不厚此薄彼。
“增强控制力” 旨在升华 Svelte 的整体设计理念，即我们的工具应该为我们自身的智能扩展而存在，期望再次带火 William Gibson 风格。
如果你是 Svelte 2 的用户，那么可能要手动做一些升级。
在接下来的几天，我们将会发布迁移指南和 svelte-upgrade（https://github.com/sveltejs/svelte-upgrade）的更新版本，我们将尽最大努力使得这个过程自动化。
但这毕竟是一次重大的变更，并非所有内容都能自动处理得了。
当然我们不会掉以轻心：希望你体验了 Svelte 3 之后能够明白，我们为什么认为有必要与过去决裂。
尽管这个版本已经够折腾的了，但我们还远未完成。
我们还有大量的想法来生成更智能、更紧凑的代码，以及一个长长的特性期望列表。
Sapper（https://sapper.svelte.dev），我们一个 Next.js 风格的应用框架，目前仍处于更新迭代中，支持使用 Svelte 3。
Svelte Native（https://svelte-native.technology）这个社区项目可以使你用 Svelte 来编写 android 或 ios 的 APP，该项目虽然取得了一些进展，但应该得到 core 的更全面的支持。
我们还没有其他框架那样拥有很多编辑器扩展、语法高亮、组件工具、devtool 等等，我们也应该丰富这些。
我们也确实是想添加一流的 TypeScript 支持。
与此同时，我们认为 Svelte 3 是构建 Web 应用的最佳方式。
花个把小时浏览一下我们的教程（https://svelte.dev/tutorial），希望能使你有所动容。
无论如何，我们都希望在 Discord 聊天室（https://svelte.dev/chat）和 Github（https://github.com/sveltejs/svelte）上看到你。
欢迎每一位，尤其是你。
以上是关于Svelte 3：反思响应式编程的主要内容，如果未能解决你的问题，请参考以下文章
html 将以编程方式附加外部脚本文件的javascript代码片段，并按顺序排列。用于响应式网站，其中ma