Xiaoru "Leo" Li 原作鹉戚，翻譯轉(zhuǎn)載自 New Frontend 垫桂。
總想了解下 Svelte（web 開發(fā)的下一次革命）但是一直沒時間师幕？
01
這份十條推文組成的旋風教程正是為你準備的！
（劇透警告：Svelte 是如此直觀易用诬滩，以至于你可能感覺這些你都已經(jīng)知道了霹粥！)
Svelte 的工作機制：
- 編譯器：并不會分發(fā)一個 Svelte 「庫」給用戶，而是在構(gòu)建階段編譯出優(yōu)化的純 JS 代碼
- 組件：應用由可組合的 UI 元素組成
- 響應式：事件/用戶交互觸發(fā)一系列狀態(tài)改變疼鸟，自動更新整個應用的組件
02
用戶界面是組件樹。組件定義了應用應當如何解釋一些抽象的「狀態(tài)」值空镜，以便在瀏覽器中轉(zhuǎn)換為 DOM 元素浩淘，并最終轉(zhuǎn)換為屏幕上的像素捌朴。
03
每個 .svelte 文件包含一個組件，由三部分組成：
<stript>是 JS 編寫的組件邏輯<style>是 CSS 樣式张抄，作用域和應用范圍僅限于當前組件Svelte 模板砂蔽，以 HTML 基礎，加上一些定制組件和內(nèi)嵌邏輯（類似 JSX）
04
除了 HTML 元素外，Svelte 模板中還可以使用自定義組件泽台。在不會引起歧義的情況下什荣，在模板中引入自定義組件時可以省略 .svelte 文件擴展名，但是自定義組件的首字母 必須 大寫怀酷。
花括號中可以使用 JS 表達式稻爬。
05
「控制」子組件行為的常見做法是將數(shù)據(jù)作為屬性（props）傳入。
使用 export 暴露屬性變量蜕依。注意賦值時使用 let 而不是 const桅锄，因為 const 無法重新賦值。
06
用戶動作會觸發(fā)事件样眠。我們使用 on: 監(jiān)聽事件并運行函數(shù)以更新狀態(tài)友瘤。用戶界面會隨著狀態(tài)的更新自動更新。
一般來說數(shù)據(jù)從上往下流動檐束，但我們可以使用 bind: 開放雙向數(shù)據(jù)流動以簡化狀態(tài)更新邏輯辫秧。
07
$: 開頭的語句是「響應式語句」。
Svelte 會分析響應式語句依賴的變量被丧。任意依賴變量的值改變時盟戏，會重新執(zhí)行相應的響應式語句。聲明衍生狀態(tài)或觸發(fā)「副作用」時這個特性十分好用甥桂。
08
響應式「store」方便在組件之間共享狀態(tài)柿究。store 放在單獨的 JS 文件里，只需用 writable 封裝一個值就可以創(chuàng)建黄选。
在組件中引用（讀寫）時蝇摸，store 名稱帶上 $ 前綴。編譯器真奇妙办陷！
09
在 Svelte 模板中貌夕，使用 {#if} 可以實現(xiàn)有條件地渲染組件（{#if} 有一個可選的 {:else} 分支）。
使用 {#each} 渲染列表中的每個成員懂诗。
別忘了總是使用 {/if} 或 {/each} 收尾蜂嗽。
（下面的例子中其實應該使用 <ol>苗膝，我用 <ul> 是為了演示如何訪問數(shù)組索引）殃恒。
10
Svelte 下進行 API 請求之類的異步操作非常容易植旧。
我們可以直接 {#await} Promise 完成，在結(jié)果就緒前顯示「加載中」离唐。
注意 {#await} 關鍵字只適用于模板部分病附，無法在 <script> 中使用。
Svelte 自帶精美的動畫變換效果。試著給你的組件加上 transition:fly 屬性嵌戈！還可以嘗試下其他類型的動畫效果覆积，比如 fade（淡入淡出） 和 slide（滑動）。你還能使用 in:熟呛、out: 分別為出現(xiàn)和消失指定不同的效果宽档。
傳入?yún)?shù)可以進一步微調(diào)動畫效果。
好了庵朝，這就是上手 Svelte 前需要了解的所有內(nèi)容吗冤。??
開發(fā)愉快！
（這篇旋風教程的形式借鑒了 Chris Achard 寫的 React 超短入門教程)
