超級簡短的 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 超短入門教程)