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 表达式。

Svelte 模板示例

05

「控制」子组件行为的常见做法是将数据作为属性（props）传入。

使用 export 暴露属性变量。注意赋值时使用 let 而不是 const，由于 const 无法重新赋值。

暴露变量和传入属性

06

客户动作会触发事件。我们使用 on: 监听事件并运行函数以升级状态。客户界面会随着状态的升级自动升级。

一般来说数据从上往下流动，但我们可以使用 bind: 开放双向数据流动以简化状态升级逻辑。

on 和 bind 用法示例

07

$: 开头的语句是「响应式语句」。

Svelte 会分析响应式语句依赖的变量。任意依赖变量的值改变时，会重新执行相应的响应式语句。公告衍生状态或者触发「反作用」时这个特性十分好用。

响应式语句示例：检测密码强度

08

响应式「store」方便在组件之间共享状态。store 放在单独的 JS 文件里，只要用 writable 封装一个值即可以创立。

在组件中引用（读写）时，store 名称带上 $ 前缀。编译器真奇妙！

store 的公告和使用

09

在 Svelte 模板中，使用 {#if} 可以实现有条件地渲染组件（{#if} 有一个可选的 {:else} 分支）。

使用 {#each} 渲染列表中的每个成员。

别忘了总是使用 {/if} 或者 {/each} 收尾。

（下面的例子中其实应该使用 <ol>，我用 <ul> 是为了演示如何访问数组索引）。

if 和 each 示例

10

Svelte 下进行 API 请求之类的异步操作非常容易。

我们可以直接 {#await} Promise 完成，在结果就绪前显示「加载中」。

注意 {#await} 关键字只适用于模板部分，无法在 <script> 中使用。

{#await}、{:then}、{:catch}

Svelte 自带精美的动画变换效果。试着给你的组件加上 transition:fly 属性！还可以尝试下其余类型的动画效果，比方 fade（淡入淡出） 和 slide（滑动）。你还能使用 in:、out: 分别为出现和消失指定不同的效果。

传入参数可以进一步微调动画效果。

动画效果演示

好了，这就是上手 Svelte 前需要理解的所有内容。??

开发愉快！

（这篇旋风教程的形式借鉴了 Chris Achard 写的 React 超短入门教程)