⏰ Svelte 速成课程（10 张图片！）

最初在 Twitter 上以主题形式发布：https://twitter.com/hexrcs/status/1185186492982943744

重大更新：视频版本现已推出！

👉 YouTube 播放列表- 总共只有 13 分钟！ 🥳

一直想了解 Svelte（又名“Web 开发领域的下一个大事件”），但一直没时间？⏰

🔥 我为你准备了 10 分钟速成课程！👇

（剧透警告：Svelte 非常直观且易于使用，您可能会觉得自己已经了解它！🥳）

1 - Svelte 的工作原理

• 编译器：不向用户提供 Svelte“库”，而是构建时优化的纯 JS
• 组件：应用程序由可组合的 UI 元素组成
• 反应式：事件/用户交互触发状态变化链，自动更新整个应用程序的组件

2. UI 是一个组件树

组件定义了您的应用程序应如何解释一些抽象的“状态”值，以便将它们转换为浏览器中的 DOM 元素，并最终转换为屏幕上的像素。

3 - Svelte 组件的剖析

每个.svelte文件包含一个组件，由 3 个部分组成：

• <script>是 JS 中的组件逻辑
• <style>是 CSS 样式，作用域仅限于当前组件
• Svelte 模板，基于 HTML，但可以使用自定义组件和内联逻辑（如 JSX）

4 - Svelte 模板

Svelte 模板允许我们除了使用 HTML 元素之外，还可以使用自定义组件。.svelte如果没有歧义，文件扩展名是可选的，但自定义组件的首字母必须大写。

我们可以在花括号内使用 JS 表达式{ }。

5 - 设置“道具”

“控制”子组件行为的常见方法是将数据作为 props（属性）传递到其中。

要接受 prop，请使用 暴露一个变量export。使用 很重要let，因为const不可重新赋值。

设置 prop 就像执行常规 HTML 一样。

6 - 更新组件状态

用户操作触发事件。on:让我们监听事件并触发函数来更新状态。状态变化将自动更新 UI。

数据通常从父级流向子级，但我们可以bind:通过允许双向数据流来简化状态更新逻辑。

7 -$:反应性语句

“反应性语句”是指那些标有 的语句$:。

Svelte 会分析它们依赖的变量。当任何依赖项发生更改时，相应的响应式语句都会重新运行。这对于声明派生状态或触发“副作用”非常有用。

8 – 反应状态“存储”

响应式“store”可以轻松地在多个组件之间共享状态。它可以存在于单独的 JS 文件中。要创建 store，只需包裹writable一个值即可。

在组件中，我们在存储名称前添加前缀，$以便直接使用或更新它们。编译器的魔力！

9 - 条件渲染和列表

{#if}我们可以通过和 可选有条件地使用 Svelte 的模板来渲染元素{:else}。

为了呈现列表中的所有内容，我们有{#each}。

{/if}记住始终用或 来关闭块{/each}！

（应该<ol>在示例中使用，但我想展示索引访问的工作原理。）

10 - 优雅的 Async/Await

使用 Svelte 执行 API 请求等异步操作非常容易。

我们可以简单地{#await}解决一个 Promise，在结果准备好之前显示一个“加载”占位符。

请注意，我们在模板部分等待 Promise，因此await中没有关键字<script>。

奖励 - 动画过渡

Svelte 内置了简洁的动画过渡效果。不妨试试为你的组件添加transition:fly属性！此外，它还提供其他类型，例如淡入淡出、滑动等等。你还可以in: out:分别定义开场/结尾。

附加到过渡道具的是参数。

👆 就这样吧，伙计们！

就是这样——开始使用 Svelte 所需的一切！😁

我们在这个速成课程中涵盖了很多内容，从最基本的概念到在其他框架中甚至可能被认为是中级或高级的主题（例如 API 请求和动画转换）。

现在轮到你用 Svelte 来构建一些酷炫的东西了。Svelte REPL是一个很好的起点！

玩得开心！🥳

（线程速成课程格式受到@chrisachard启发😁查看他出色的 React/Redux、Git 速成课程！）

聚苯乙烯

由于 Svelte 的表现力非常强，我前几天开玩笑说，Svelte 开发人员计算的是“代码字符”，而不是“代码行”......

确实如此！以下是我和Tomasz Łakomy ​​( @tlakomy ​​) ( @hexrcs ) 一直在玩的几个推文大小的 Svelte 小程序-

那么，我们可以在推文中放入的最复杂的 Svelte 应用是什么？😁

喜欢这篇文章吗？

我将在 Twitter 上发布更多内容：@hexrcs
您也可以在我的主页上找到我：xiaoru.li