超级简短的 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 通讯」