Svelte 3：重新思考響應式

經過幾個月的倒數計時，我們非常興奮地宣布 Svelte 3 的穩定版本正式發布。這是個大型的版本，代表著 Svelte 社群中許多人耗費數百小時的努力，包括來自 beta 測試人員的寶貴回饋，他們在設計的每個階段都提供了幫助。

我們相信您會喜歡它。

什麼是 Svelte？

Svelte 是一個元件框架，就像 React 或 Vue 一樣，但有一個重要的區別。傳統框架允許您編寫宣告式、狀態驅動的程式碼，但這是有代價的：瀏覽器必須額外工作，使用諸如虛擬 DOM 差異比對之類的技術將這些宣告式結構轉換為 DOM 操作，而這些技術會消耗您的幀預算並增加垃圾回收器的負擔。

相反地，Svelte 在建置時執行，將您的元件轉換為高效能的命令式程式碼，可精確地更新 DOM。因此，您能夠開發具有出色效能特性的複雜應用程式。

Svelte 的第一個版本是關於測試一個假設——一個專用的編譯器可以生成穩定的程式碼，提供良好的使用者體驗。第二個版本是一個小的升級，將事情整理得更好一些。

第三版是一個重大的改版。過去五六個月以來，我們的重點是提供出色的開發人員體驗。現在可以使用比其他地方少得多的樣板程式碼來編寫元件。嘗試全新的教學，看看我們的意思——如果您熟悉其他框架，我們相信您會感到驚喜。

為了實現這一點，我們首先需要重新思考現代 UI 框架的核心概念：響應式。

將響應式移入語言

在舊的 Svelte 中，您會透過呼叫 this.set 方法來告知電腦某些狀態已變更

const { const count: anycount } = this.get();
this.set({
	count: anycount: const count: anycount + 1
});

這會導致元件響應。說到這，this.set 幾乎與古典（pre-hooks） React 中使用的 this.setState 方法相同

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

有一些重要的技術差異（正如我在上面的影片中所解釋的，React 並不是響應式的），但在概念上是相同的。

所有這些都隨著 hooks 的出現而改變，它以非常不同的方式處理狀態。許多框架開始試驗他們自己實現的 hooks，但我們很快得出結論，這不是我們想走的方向。Hooks 有一些有趣的特性，但它們也涉及一些不自然的程式碼，並為垃圾回收器創造了不必要的工作。對於一個用於嵌入式裝置以及動畫密集型互動的框架來說，這不是好事。

因此，我們退一步思考，問自己哪種 API 適合我們…並意識到最好的 API 根本沒有 API。我們可以直接使用該語言。更新某些 count 值——以及所有依賴於它的東西——應該像這樣簡單

let count: numbercount += 1;

由於我們是一個編譯器，我們可以透過在幕後檢測賦值來做到這一點

let count: numbercount += 1;
const $$invalidate: <number>(name: string, value: number) => undefined$$invalidate('count', let count: numbercount);

重要的是，我們可以在不使用代理或訪問器所帶來的負擔和複雜性的情況下完成所有這些。它只是一個變數。

新面貌

您的元件並不是唯一煥然一新的東西。Svelte 本身也擁有全新的外觀和風格，這歸功於 Achim Vedam 的出色設計工作，他創造了我們的新標誌和網站，已從 svelte.technology 遷移到 svelte.dev。

我們也將標語從「神奇消失的 UI 框架」改為「網路增強的網路應用程式」。Svelte 有許多方面——出色的效能、小型捆綁包、可訪問性、內建的樣式封裝、宣告式轉換、易用性、它是一個編譯器等——專注於其中任何一個都感覺對其他方面不公平。「網路增強」的設計目的是喚起 Svelte 的整體理念，即我們的工具應該作為我們自己的智慧延伸而運作——希望帶有復古、威廉·吉布森式的風格。

從第二版升級

如果您是現有的 Svelte 2 使用者，恐怕需要進行一些手動升級。在未來幾天內，我們將發布遷移指南和更新版本的 svelte-upgrade，它將盡最大努力自動化該過程，但這是一個重大變更，並非所有事情都可以自動處理。

我們不會輕易做出這種決定：希望一旦您體驗過 Svelte 3，您就會明白我們為什麼覺得有必要與過去決裂。

即將推出

儘管這次發布很艱辛，但我們還遠遠沒有完成。我們有很多關於生成更智慧、更精簡程式碼的想法，以及一個長長的功能願望清單。Sapper，我們類似 Next.js 的應用程式框架，仍在更新以使用 Svelte 3。Svelte Native 社群專案，允許您使用 Svelte 編寫 Android 和 iOS 應用程式，正在穩步發展，但應獲得核心的更完整支援。我們還沒有像其他框架那樣擁有豐富的編輯器擴充功能、語法突出顯示、元件套件、開發工具等，我們應該解決這個問題。我們真的希望加入一流的 TypeScript 支援。

但同時，我們認為 Svelte 3 是目前建構網路應用程式的最佳方式。花一個小時完成教學，我們希望您也能相信這一點。無論如何，我們都歡迎您加入我們的 Discord 聊天室和 GitHub——每個人都歡迎，尤其是您。