Xiaoru "Leo" Li 原作，翻译转载自 New Frontend 。
总想了解下 Svelte（web 开发的下一次革命）但是一直没时间？
01
这份十条推文组成的旋风教程正是为你准备的！
（剧透警告：Svelte 是如此直观易用，以至于你可能感觉这些你都已经知道了！)
Svelte 的工作机制：
- 编译器：并不会分发一个 Svelte 「库」给用户，而是在构建阶段编译出优化的纯 JS 代码
- 组件：应用由可组合的 UI 元素组成
- 响应式：事件/用户交互触发一系列状态改变，自动更新整个应用的组件
02
用户界面是组件树。组件定义了应用应当如何解释一些抽象的「状态」值，以便在浏览器中转换为 DOM 元素，并最终转换为屏幕上的像素。
03
每个 .svelte 文件包含一个组件，由三部分组成：
<stript>是 JS 编写的组件逻辑<style>是 CSS 样式，作用域和应用范围仅限于当前组件Svelte 模板，以 HTML 基础，加上一些定制组件和内嵌逻辑（类似 JSX）
04
除了 HTML 元素外，Svelte 模板中还可以使用自定义组件。在不会引起歧义的情况下，在模板中引入自定义组件时可以省略 .svelte 文件扩展名，但是自定义组件的首字母 必须 大写。
花括号中可以使用 JS 表达式。
05
「控制」子组件行为的常见做法是将数据作为属性（props）传入。
使用 export 暴露属性变量。注意赋值时使用 let 而不是 const，因为 const 无法重新赋值。
06
用户动作会触发事件。我们使用 on: 监听事件并运行函数以更新状态。用户界面会随着状态的更新自动更新。
一般来说数据从上往下流动，但我们可以使用 bind: 开放双向数据流动以简化状态更新逻辑。
07
$: 开头的语句是「响应式语句」。
Svelte 会分析响应式语句依赖的变量。任意依赖变量的值改变时，会重新执行相应的响应式语句。声明衍生状态或触发「副作用」时这个特性十分好用。
08
响应式「store」方便在组件之间共享状态。store 放在单独的 JS 文件里，只需用 writable 封装一个值就可以创建。
在组件中引用（读写）时，store 名称带上 $ 前缀。编译器真奇妙！
09
在 Svelte 模板中，使用 {#if} 可以实现有条件地渲染组件（{#if} 有一个可选的 {:else} 分支）。
使用 {#each} 渲染列表中的每个成员。
别忘了总是使用 {/if} 或 {/each} 收尾。
（下面的例子中其实应该使用 <ol>，我用 <ul> 是为了演示如何访问数组索引）。
10
Svelte 下进行 API 请求之类的异步操作非常容易。
我们可以直接 {#await} Promise 完成，在结果就绪前显示「加载中」。
注意 {#await} 关键字只适用于模板部分，无法在 <script> 中使用。
Svelte 自带精美的动画变换效果。试着给你的组件加上 transition:fly 属性！还可以尝试下其他类型的动画效果，比如 fade（淡入淡出） 和 slide（滑动）。你还能使用 in:、out: 分别为出现和消失指定不同的效果。
传入参数可以进一步微调动画效果。
好了，这就是上手 Svelte 前需要了解的所有内容。😁
开发愉快！
（这篇旋风教程的形式借鉴了 Chris Achard 写的 React 超短入门教程)
