注意：原文發(fā)表于2019-4-22券坞，隨著框架不斷演進娘扩，部分內容可能已不適用。

原文：Svelte 3: Rethinking reactivity
作者：Rich Harris
翻譯：前端子魚
聲明：轉載請指明本文出處粤策。

終于樟澜，塵埃落定。

歷經(jīng)數(shù)月之后叮盘，這幾天來我們喜不自勝：我們宣布 Svelte v3 穩(wěn)定版即將正式發(fā)布了秩贰。

這是一個大版本。

這次的發(fā)布柔吼，是 Svelte 社區(qū)眾多貢獻者耗費了數(shù)百小時的心血毒费，包括來自 beta 版測試人員的寶貴反饋，他們聚沙成塔愈魏，眾志成城觅玻，使得各項設計精益求精想际，日臻完善。

相信這次發(fā)布能不負眾望溪厘，讓你喜歡上它胡本。

什么是 Svelte？

Svelte 是一個組件框架（就像 React 或 Vue）桩匪，不過與他們又截然不同打瘪。

傳統(tǒng)的框架也允許你編寫聲明式的、狀態(tài)驅動的代碼，不過是要付出代價的：

瀏覽器做了很多額外的工作彩扔，去將這些聲明式的結構轉換為 DOM 操作妆档，使用 Virtual DOM 差異比較（diffing） 等這類技術，可能會超出你的設想虫碉，并且加劇垃圾回收的負擔敦捧。

相反兢卵，Svelte 在執(zhí)行 build 的時候甜奄，將組件轉化為高效的命令式代碼课兄，并能精確地更新 DOM。

因此晨继，你可以寫出高性能且炫酷的程序烟阐。

Svelte 的首個版本完全是為了 驗證這么一個假設，即通過一個專用的編譯器可以生成高度可靠的代碼紊扬，同時還能提供出色的用戶體驗蜒茄。

第二版是較小的升級，稍作調整珠月。

第三版我們進行了重大的改進扩淀。

在過去的五六個月里，我們工作的重點是在給程序員提供出色的開發(fā)體驗上啤挎。

現(xiàn)在編寫組件比起其他框架而言驻谆，樣板代碼少得多卵凑。

如果你使用過其他框架的話，我們認為你會被驚艷到胜臊。耳聽為虛勺卢，不妨試讀一下我們全新的教程，甄辨真?zhèn)巍?/p>

我們首先需要反思現(xiàn)代 UI 框架的核心概念：響應式編程（下方是反思響應式編程的視頻象对，建議您直接閱讀本文黑忱，也即視頻所講的內容，你也可以在 You Gotta Love Frontend Code Camp 上觀看）勒魔。

將響應式融入語言

在舊版的 Svelte 中甫煞，你可以通過調用 this.get 方法來告訴程序有某些狀態(tài)已更改：

const { count } = this.get(); 

this.set({ count: count + 1 });

這可以讓組件得到響應。

剛好說到這里順便提一下冠绢，this.get 與經(jīng)典（Hooks 之前的） React 中使用的 this.setState 方法幾乎相同：

const { count } = this.state; 
this.setState({ count:count + 1 });

但有一些重要的技術差異（正如我在《反思響應式編程》的視頻中解釋的那樣抚吠，React 不是響應式的），不過從概念上講卻是同一回事弟胀。

隨著 Hooks 的降臨楷力，引起了翻天覆地的改變，Hooks 以與眾不同的方式來處理狀態(tài)孵户。

許多框架競相效尤萧朝，紛紛開始嘗試實現(xiàn)自己的 Hooks，不過我們很快就當機立斷：這并非我們致力的方向夏哭。

（實際上检柬，Svelte v3 基本上是 Sunil 的錯）

Hooks 有一些吸引人的特性，但是它們也包含了一些不太自然的代碼方庭，并為垃圾回收器制造了些不必要的麻煩厕吉。

對于一個用于嵌入式設備和大量動畫交互的框架來說，這不是一件好事械念。所以我們先退后一步靜心自問头朱，什么樣的 API 才適合我們……

道說：大方無隅，大音希聲龄减，大象無形……

—— 沒有 API 就是最好的 API项钮！

我們豁然開朗，我們可以憑借語言來另辟蹊徑希停。

更新 count 的值烁巫，以及所有依賴它的東西，應該像這樣輕而易舉：

count += 1;

由于我們是一個編譯器宠能，因此我們可以通過在幕后檢測賦值操作來實現(xiàn)這一點：

count += 1; 
$$invalidate('count', count);

更重要的是亚隙，我們可以在沒有使用代理或者 get/set 訪問器帶來的開銷和復雜性的情況下，實現(xiàn)了這些能力违崇。

它不過是一個普通的變量而已阿弃。

煥然一新

除了編寫組件的方式煥然一新外诊霹，Svelte 自身也不同往日了，擁有了全新的外觀和感覺渣淳。

仰賴 Achim Vedam 出色的工作脾还，設計了我們新的徽標和網(wǎng)站，并啟用了新的域名 svelte.dev 代替了 svelte.technology入愧。

我們還更改了口號鄙漏，從“神奇地銷聲匿跡的UI框架”改成了“增強控制力的 Web APP”。

Svelte 八面玲瓏 —— 出色的性能棺蛛、尺寸很小的包怔蚌、可訪問性、內置樣式封裝鞠值、聲明式轉換媚创、易用性以及它本質上只是一個編譯器等等。

這些我們都會面面俱到彤恶，絕不厚此薄彼。

“增強控制力” 旨在升華 Svelte 的整體設計理念鳄橘，即我們的工具應該為我們自身的智能擴展而存在声离，期望再次帶火 William Gibson 風格。

從 v2 升級

如果你是 Svelte 2 的用戶瘫怜，那么可能要手動做一些升級术徊。

在接下來的幾天，我們將會發(fā)布遷移指南和 svelte-upgrade 的更新版本鲸湃，我們將盡最大努力使得這個過程自動化赠涮。

但這畢竟是一次重大的變更，并非所有內容都能自動處理得了暗挑。

當然我們不會掉以輕心：希望你體驗了 Svelte 3 之后能夠明白笋除，我們?yōu)槭裁凑J為有必要與過去決裂。

拭目以待

盡管這個版本已經(jīng)夠折騰的了炸裆，但我們還遠未完成垃它。

我們還有大量的想法來生成更智能、更緊湊的代碼烹看，以及一個長長的特性期望列表国拇。

Sapper，我們一個 Next.js 風格的應用框架惯殊，目前仍處于更新迭代中酱吝，支持使用 Svelte 3。

Svelte Native 這個社區(qū)項目可以使你用 Svelte 來編寫 Android 或 iOS 的 APP土思，該項目雖然取得了一些進展务热，但應該得到 core 的更全面的支持忆嗜。

我們還沒有其他框架那樣擁有很多編輯器擴展、語法高亮陕习、組件工具霎褐、devtool 等等，我們也應該豐富這些该镣。

我們也確實是想添加一流的 TypeScript 支持冻璃。

與此同時，我們認為 Svelte 3 是構建 Web 應用的最佳方式损合。

花個把小時瀏覽一下我們的教程省艳，希望能使你有所動容。

無論如何嫁审，我們都希望在 Discord 聊天室和 Github 上看到你跋炕。

歡迎每一位開發(fā)者 —— 尤其是你。

< The End >
- 窗明幾凈律适，靜候時日變遷 -