超级简短的 Svelte 框架入门教程，仅需十条推文
原文作者：Xiaoru "Leo" Li ，翻译内容载自 New Frontend
总想了解下 Svelte（web 开发的下一次革命）但是一直没时间？
这份十条推文组成的旋风教程正是为你准备的！
（剧透警告：Svelte 是如此直观易用，以至于你可能感觉这些你都已经知道了！)
1
Svelte 的工作机制：
编译器：并不会分发一个 Svelte 「库」给用户，而是在构建阶段编译出优化的纯 JS 代码
组件：应用由可组合的 UI 元素组成
响应式：事件/用户交互触发一系列状态改变，自动更新整个应用的组件
2
用户界面是组件树。组件定义了应用应当如何解释一些抽象的「状态」值，以便在浏览器中转换为 DOM 元素，并最终转换为屏幕上的像素。
3
每个 .svelte 文件包含一个组件，由三部分组成：
<stript>是 JS 编写的组件逻辑<style> 是CSS 样式，作用域和应用范围仅限于当前组件
Svelte 模板，以 HTML 基础，加上一些定制组件和内嵌逻辑（类似 JSX）
4
除了 HTML 元素外，Svelte 模板中还可以使用自定义组件。在不会引起歧义的情况下，在模板中引入自定义组件时可以省略 .svelte 文件扩展名，但是自定义组件的首字母 必须 大写。
花括号中可以使用 JS 表达式。
5
「控制」子组件行为的常见做法是将数据作为属性（ props）传入。
使用 export 暴露属性变量。注意赋值时使用 let 而不是 const ，因为 const 无法重新赋值。
6
用户动作会触发事件。我们使用 on: 监听事件并运行函数以更新状态。用户界面会随着状态的更新自动更新。
一般来说数据从上往下流动，但我们可以使用 bind: 开放双向数据流动以简化状态更新逻辑。
7
$:开头的语句是「响应式语句」。
Svelte 会分析响应式语句依赖的变量。任意依赖变量的值改变时，会重新执行相应的响应式语句。声明衍生状态或触发「副作用」时这个特性十分好用。
8
响应式「store」方便在组件之间共享状态。store 放在单独的 JS 文件里，只需用writable封装一个值就可以创建。
在组件中引用（读写）时，store 名称带上 $ 前缀。编译器真奇妙！
9
在 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 超短入门教程）
end
LeanCloud，领先的 BaaS 提供商，为移动开发提供强有力的后端支持。更多内容请关注「LeanCloud 通讯」