超级简短的 Svelte 框架入门教程，仅需十条推文

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 超短入门教程)