最近這些年，隨著三大框架React、Vue、Angular版本逐漸穩(wěn)定，前端技術(shù)棧的迭代似乎緩慢下來。
如果我們把目光拉伸到未來十年的視角，前端行業(yè)會出現(xiàn)哪些框架有可能會挑戰(zhàn)React、Vue、Angular呢？
嶄露頭角的 Svelte 應(yīng)該是其中的選項(xiàng)之一。
簡介
Svelte 是一個(gè)構(gòu)建 web 應(yīng)用程序的工具。它被預(yù)測為未來十年可能取代React和Vue等其他框架的新興技術(shù)。
有一個(gè)關(guān)鍵的區(qū)別：Svelte 在 構(gòu)建/編譯階段 將你的應(yīng)用程序轉(zhuǎn)換為理想的 JavaScript 應(yīng)用，而不是在 運(yùn)行階段 解釋應(yīng)用程序的代碼。這意味著你不需要為框架所消耗的性能付出成本，并且在應(yīng)用程序首次加載時(shí)沒有額外損失。
你可以使用 Svelte 構(gòu)建整個(gè)應(yīng)用程序，也可以逐步將其融合到現(xiàn)有的代碼中。你還可以將組件作為獨(dú)立的包（package）交付到任何地方，并且不會有傳統(tǒng)框架所帶來的額外開銷。
發(fā)展趨勢
開發(fā)者滿意度
從2019年開始, Svelte出現(xiàn)在榜單中。2020年，Svelte在滿意度排行榜中超越了react，躍升到了第一位。在過去的兩年里，也是碾壓三大框架的存在，還能與最新的 Solid 并駕齊驅(qū)（都是90%）。
開發(fā)者興趣度
在開發(fā)者興趣度方面，在過去的四年里，Svelte 一直蟬聯(lián)了第一。
市場占有率
2020年，Svelte 的市場占有率從第6名躍升到第4名，僅次于 React、Angular、Vue 老牌前端框架。
隨著 Svelte 在社區(qū)里慢慢流行起來，它的占有率還會提升。
在最新的《State of JS survey》中，Svelte 被預(yù)測為未來十年可能取代React和Vue等其他框架的新興技術(shù)。
Svelte 特點(diǎn)
No Runtime —— 無運(yùn)行時(shí)代碼
React 和 Vue 都是基于運(yùn)行時(shí)的框架，當(dāng)用戶在你的頁面進(jìn)行各種操作改變組件的狀態(tài)時(shí)，框架的運(yùn)行時(shí)會根據(jù)新的組件狀態(tài)（state）計(jì)算（diff）出哪些DOM節(jié)點(diǎn)需要被更新，從而更新視圖。
而 Svelte 會在編譯階段將代碼編譯到更加貼近dom操作的代碼?；蛘哒f，Svelte 生成的是命令式的dom創(chuàng)建過程，直接操作Dom。
Less Code —— 更少的代碼
我們直接來看官網(wǎng)的例子：
實(shí)現(xiàn)的功能也很簡單，就是兩個(gè)Input的值求和，然后展示出來。圖中是用svelte編寫的代碼。 看下 React 書寫的版本：
import React, { useState } from 'react';
export default () => {
const [a, setA] = useState(1);
const [b, setB] = useState(2);
function handleChangeA(event) { setA(+event.target.value); }
function handleChangeB(event) { setB(+event.target.value); }
return (
<div>
<input type="number" value={a} onChange={handleChangeA}/>
<input type="number" value= onChange={handleChangeB}/>
<p>{a} + = {a + b}</p>
</div>
);
}
再來看下 Vue 版本：
<template>
<div>
<input type="number" v-model.number="a">
<input type="number" v-model.number="b">
<p>{{a}} + {} = {{a + b}}</p>
</div>
</template>
<script>
export default {
data: function() {
return { a: 1, b: 2 };
}
};
</script>
三者對比：
| 框架名稱 | svelte | react | vue |
|---|---|---|---|
| demo字符數(shù) | 145 | 445 | 263 |
單純從代碼字符數(shù)上，Svelte比Vue和React少。但就此得出說svelte的編碼體積更小，這樣是不對的。我們一起來看下編譯后的對比：
| 框架名稱 | svelte | react | vue |
|---|---|---|---|
| 體積 | 1.6k | 22k | 42k |
從上述對比中可以看出，svelte 編譯后的體積很少，包體積1.6k，對于一般中小型項(xiàng)目而言，整體運(yùn)行的代碼（編譯后的代碼+包體積）還是比較小的，所以可以說svelte項(xiàng)目的代碼較小。
PS: 對于大型項(xiàng)目而言，因?yàn)閟velte隨著業(yè)務(wù)的進(jìn)行，代碼編譯產(chǎn)物陡峭，大型項(xiàng)目體積并不會比react、vue等小,因此需要辯證看待。
svelte 生成的是命令式的dom創(chuàng)建過程，虛擬 dom 的框架生成的是虛擬 dom 結(jié)構(gòu)創(chuàng)建的過程（vdom 渲染函數(shù)）。在基于虛擬 DOM 的框架里，虛擬dom到真實(shí)dom的轉(zhuǎn)換過程，被封裝在運(yùn)行時(shí)里，所以每個(gè)組件虛擬 dom 創(chuàng)建過程僅僅是數(shù)據(jù)結(jié)構(gòu)的表述，更為緊湊，代碼產(chǎn)物也就比較少。
Hight-Performance ——高性能
在Virtual Dom已經(jīng)是前端框架標(biāo)配的今天， Svelte 聲稱自己是沒有Virtual Dom加持的， 那性能如何呢？
Jacek Schae 在《A RealWorld Comparison of Front-End Frameworks with Benchmarks》中用主流的前端框架來編寫 RealWorld 應(yīng)用，使用 Chrome 的Lighthouse Audit測試性能，得出數(shù)據(jù)是Svelte 略遜于Vue, 但好于 React。
Svelte 性能還不錯(cuò)，至少沒有我們預(yù)期的那么糟糕。
PS：sveltedom 是把數(shù)據(jù)和真實(shí)dom之間的映射關(guān)系，在編譯的時(shí)候就通過AST等算出來，保存在p函數(shù)中。p函數(shù)就是一堆“if(...){...}”判斷，直接保證dom的更新。同時(shí)，這也說明“如果項(xiàng)目中涉及了dom操作越多，那這個(gè)p函數(shù)就越大，編譯后的代碼提交就會增大”。
其他
本文沒有涉及 Svelte 的語法，且 Svelte 的語法極其簡單，官方教程學(xué)習(xí)文檔也比較詳細(xì)，相信大家很快就會上手語法的，這里就不做官網(wǎng)搬運(yùn)工了。附上地址供大家參閱。文章來源：http://www.zghlxwxcb.cn/news/detail-437097.html
官方地址
https://www.sveltejs.cn/文章來源地址http://www.zghlxwxcb.cn/news/detail-437097.html
到了這里，關(guān)于挑戰(zhàn)“三大框架”的解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
