建站
咨詢
售后
建站咨詢
新聞中心
前言
大家好我是愛分享的老前端羊村長，國外最近兩年涌現(xiàn)兩個新銳框架Svelte和Solid，大家可能忙工作沒太關(guān)注，但是t它們大有后來居上的意思。來看一下github的star數(shù)量感受一下：
成都創(chuàng)新互聯(lián)是專業(yè)的衡南網(wǎng)站建設(shè)公司，衡南接單;提供成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行衡南網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
7月掘金開發(fā)者大會上，Vue作者尤雨溪在直播分享中多次提到SolidJS和Svelte。到底是什么原因讓開發(fā)者們?nèi)绱讼矏?？又是什么原因讓尤大如此關(guān)注它們？我們到底要不要花時間研究學(xué)習(xí)它們？
文本將帶大家體驗這兩款框架的魅力，并發(fā)表一些個人看法，歡迎小伙伴們拍磚！
對應(yīng)的學(xué)習(xí)群已經(jīng)建立起來，我將陸續(xù)發(fā)布學(xué)習(xí)文章和視頻，歡迎感興趣的小伙伴加入： 關(guān)注公眾號“村長學(xué)前端”，分別回復(fù)“svelte”和“solid”即可。
相同的開發(fā)范式
應(yīng)該說最近3年前端最流行的開發(fā)范式非React Hooks莫屬，React Hooks徹底取代了Class Components，Vue3也從最初的Class風(fēng)格最終確定為類似的Composition API，今天要討論的兩位主角也不例外均是函數(shù)風(fēng)格。應(yīng)該說，是React Hooks引領(lǐng)創(chuàng)新，啟發(fā)了眾多框架啟用新范式，但青出于藍，相似的同時解決了React Hooks各種問題。
這里出現(xiàn)三位競爭選手：Vue3、Svelte和SolidJS。Vue3大家都很熟悉就不過多贅述，這里我們主要體驗一下Svelte和SolidJS如何做組件邏輯表達和邏輯復(fù)用。
組件邏輯表達
Svelte3
作者Rich Harris曾說過Svelte的組件編譯邏輯是由React Hooks啟發(fā)而來。然而，由于Svelte 組件構(gòu)建在 HTML 之上，所以她看起來更像Vue。同時她更加優(yōu)雅了，我們沒有看到諸如let count = ref(0)這樣的響應(yīng)式聲明，當(dāng)然也不需要count.value++。我們也沒看到template這樣的標(biāo)簽，就好像我們在寫HTML頁面一般純粹！
下面我們用Svelte編寫一個counter案例，Counter.svelte：
作為一個Vuer，你會為了這些改變學(xué)習(xí)Svelte嗎？ 顯然是不夠的！我好不容易已經(jīng)習(xí)慣了ref和.value，現(xiàn)在感覺也沒什么大不了的。 但是作為一個新人，如果第一眼看到Svelte，我一定會愛上她！ 她真的太優(yōu)雅了，一見鐘情的感覺！
Solid
尤大這樣描述SolidJS：語法與React相似，實現(xiàn)與Composition API相似。我們同樣體驗一下她的魅力！下面是Solid版的Counter案例：
// Counter.jsx
import { createSignal } from "solid-js";
export default function Counter() {
const [count, setCount] = createSignal(0);
const increment = () => {
setCount(count() + 1);
};
return ;
}
作為一個Reacter，你發(fā)現(xiàn)了什么變化？
- useState()?變成了createSignal()
- count?變成了count()
你會為了這些變化學(xué)習(xí)SolidJS嗎？顯然不會，一個東西換個寫法沒有什么意義。 作為一個新人你會喜歡SolidJS嗎？可能也不會，這代碼看起來不太容易理解，市面上也沒有招Solid程序員呀，與其這樣還不如直接學(xué)React！
暫時排名
看到這里，我根據(jù)個人感覺做個暫時的排名
老鳥榜：Vue3 = React > Svelte3 > Solid
老鳥：不要跟我說什么react、angular、vue，老夫?qū)懘a就用jQuery！
菜鳥榜：Vue3 > Svelte3 > React > Solid
菜鳥：大哥們哪個框架最簡單？國內(nèi)是不是招Vue的最多？就它了！
基于依賴追蹤的范式
尤大曾在直播分享中談到React Hooks存在一些開發(fā)體驗問題，例如手動添加依賴、條件語句限制、過期閉包等。
不約而同的，各大新銳勢力在依賴管理這塊各顯神通，均通過各種手段做到了依賴的自動收集管理，這讓開發(fā)體驗提升了一個檔次。
SolidJS
我們現(xiàn)在給Counter添加一個功能：如果count發(fā)生變化，控制臺打印輸出。
可以看到我們不需要手動指定依賴項即可追蹤變化。
// 導(dǎo)入createEffect
import { createEffect, createSignal } from "solid-js";
export default function Counter() {
const [count, setCount] = createSignal(0);
// createEffect用于創(chuàng)建副作用，Solid幫我們追蹤依賴項count
createEffect(() => {
console.log('count: ' + count());
})
const increment = () => {
setCount(count() + 1);
};
return ;
}
這里就體現(xiàn)了SolidJS和React之間的不同點，開發(fā)者不再需要操心依賴項：
// 同樣的功能，`React`要指定依賴項
useEffect(() => {
setCount(count + 1);
}, [count])
這就是尤大說的類似React語法，實現(xiàn)類似Vue Composition API。 大家不要小看這些變化，除了心智負擔(dān)影響開發(fā)體驗之外，有時還會不小心寫出隱藏bug。
我想這是國外不少Reacter轉(zhuǎn)投Solid的原因之一。
Vue3
作為對比，我們拉出Vue給大家看看
這里看起來確實和Solid非常相似，定義響應(yīng)式數(shù)據(jù)，添加副作用函數(shù)，只不過Solid是讀寫分離的。
尤大總結(jié)的其他共同點
- 一次調(diào)用，符合原生JS直覺
- 自動追蹤依賴，無需手動聲明
- 引用穩(wěn)定，無需useCallback
Svelte3
Svelte響應(yīng)式系統(tǒng)基于編譯，因此也不需要做依賴追蹤，但是作為用戶我們只關(guān)心怎么寫代碼。
下面我們看一下Svelte的寫法：
let count = 0
// 副作用寫在'$:'后面
$: console.log(count)
const increment = () => {
count += 1
}
依然是最簡潔的那一個，一個$就解決問題！ 我對Svelte的喜愛又增加了~
暫時排名
看到這里，我的排名發(fā)生了一些變化：Svelte和Vue在菜鳥榜平起平坐！
老鳥榜：Vue3 = React > Svelte3 > Solid
老鳥：不要跟我說什么react、angular、vue，老夫?qū)懘a就用jQuery！
菜鳥榜：Vue3 = Svelte3 > Solid > React
菜鳥：woc太NB了，就選Svelte了！
基于編譯的響應(yīng)式系統(tǒng)
為了能夠盡可能提升開發(fā)體驗，大家紛紛祭出大招，開始在編譯階段做文章，比如各種基于編譯的響應(yīng)式方案：Svelte、Vue Reactivity Transform、solid labels
Svelte
輪子哥Harris在Svelte上充分利用編譯期能力，例如下面代碼，一個簡單$符號就可以生成副作用代碼
let count = 0
// 編譯器發(fā)現(xiàn)`$:`，就會把后面代碼作為count的副作用
$: console.log(count)
const increment = () => {
count += 1
}
這個看起來確實很NB，作為新手我不需要學(xué)習(xí)響應(yīng)式機制和相關(guān)API，非常簡潔。
但是，簡潔是有代價的，關(guān)于這點尤大層發(fā)出大招棒打Svelte，我們來看看他說的有沒有道理：
- Svelte組件內(nèi)才能使用$:語法，組件外需要另一套不同的API
- $:只能在頂層作用域內(nèi)使用，不可在函數(shù)內(nèi)用
Svelte Stores API
這個stores API就是前面尤大提到的“Svelte組件內(nèi)才能用$:語法”槽點中提到的另一套不同API，我們來體驗一下。
比如我們將count提到JS中去做狀態(tài)共享給不同組件，使用Svelte我需要這樣做：
import { writable } from 'svelte/store';
// 使用writeable()創(chuàng)建一個可寫的count
export const count = writable(0);Vue中的話我會這樣做：
import { ref } from 'vue'
export function useCount() {
// 使用ref()創(chuàng)建一個響應(yīng)式count
const count = ref(0)
return { count }
}這里Vue實現(xiàn)保持了組件內(nèi)編寫的一致性，確實很好。不過作為槽點噴Svelte我覺得沒道理，Svelte只是把學(xué)習(xí)一個API的時間推后了一點，我不學(xué)習(xí)Composition API不是也寫不出這個Vue代碼嘛。另外如果需要全局狀態(tài)管理，我還是要學(xué)一個Vuex語法，并不能讓我少學(xué)點。
響應(yīng)式限制
另一個槽點是：$:只能在頂層作用域內(nèi)使用，不可在函數(shù)內(nèi)用。
我想尤大想要的是能夠?qū)⑦@個邏輯提取到函數(shù)內(nèi)，這樣可以復(fù)用這段邏輯。
比如利用Composition API，我們可以：
function useCount() {
const count = ref(0)
watchEffect(() => {
console.log(`the count is ${count.value}`);
alert(`the count is ${count.value}`);
})
return {count}
}但是我們不能像下面這樣：
function useCount() {
$: {
console.log(`the count is ${count}`);
alert(`the count is ${count}`);
}
}或者：
$: useCount()
function useCount() {
console.log(`the count is ${count}`);
alert(`the count is ${count}`);
}
這個限制性問題其實還是上面的Stores API問題，我們利用Stores API就可以完成提取，只是我們失去了$:這種一致性寫法。
export function useCount() {
const count = writable(0);
count.subscribe(value => {
console.log(`the count is ${count}`);
alert(`the count is ${count}`);
});
return {count}
}Vue Reactivity Transform
Vue3中引入Ref之后，.value的心智負擔(dān)也一直被人詬病，尤大也想出了很多解決方案。實驗性質(zhì)的新特性Vue Reactivity Transform就是其中之一。我們可以像下面這樣寫代碼：
let count = $ref(0) // 使用$ref聲明一個響應(yīng)式對象
watchEffect(() => console.log(count)) // 使用時可以不需要.value
count++ // 使用時可以不需要.value
相關(guān)文檔: https://vuejs.org/guide/extras/reactivity-transform.html#refs-vs-reactive-variables
這被小右稱為更普適方案，沒有以上Svelte中的限制。使用起來確實不錯~看起來大家還是蠻支持這個方案的，期待轉(zhuǎn)正！
Solid-labels
前面我們看到solid中使用類react hooks風(fēng)格API，個人認(rèn)為有以下問題：
- 這組API不符合原生JS直覺，比如我感覺count是個值，不應(yīng)該作為函數(shù)調(diào)用，修改時也希望直接賦值。
- 另外總是需要導(dǎo)入solid提供的utilities
import { createEffect, createSignal } from "solid-js"
// ...
createEffect(() => {
// 使用時需要加上括號：count()
console.log('count: ' + count());
})
// 修改時需要調(diào)用setXX方法
setCount(count() + 1);那使用solid-labels會怎樣呢？下面看一下之前的Counter例子使用solid-labels實現(xiàn)：
// $signal()創(chuàng)建響應(yīng)式數(shù)據(jù)
let count = $signal(0)
// $effect()添加副作用，直接調(diào)用count
$effect(() => console.log(count))
// 直接修改count
count++
利用插件同樣實現(xiàn)了更加簡潔、更符合JS直覺的語法，還不用導(dǎo)入solid的工具方法，贊！
項目地址：https://github.com/LXSMNSYC/solid-labels
暫時排名
可以說，大家都在利用編譯或轉(zhuǎn)譯的方式簡化API，提升開發(fā)體驗，而且都非常的簡潔、優(yōu)雅，同時各有特點：
- Vue Reactivity Transform和Solid-labels這樣的屬于上下文無關(guān)的統(tǒng)一模型。優(yōu)勢是重構(gòu)和優(yōu)化，代價是初期的上手成本。
- Svelte屬于上下文受限模型，優(yōu)勢是上手成本低，不需要了解響應(yīng)式的實現(xiàn)機制。
這一局我感覺沒有勝出者，都很優(yōu)秀。因此，我的排名沒有變化！
老鳥榜：Vue3 = React > Svelte3 > Solid
老鳥：不要跟我說什么react、angular、vue，老夫?qū)懘a就用jQuery！
菜鳥榜：Vue3 = Svelte3 > Solid > React
菜鳥：woc太NB了，我也不知道該選啥！
基于編譯的運行時優(yōu)化
同樣，利用編譯期能力，大家都可以做到極致的優(yōu)化，達到最佳的性能表現(xiàn)！
但是這里Svelte和Solid就和Vue3走上了完全不同的道路，我們稱之為無虛擬DOM。什么意思哪？也就是它們均放棄了React開啟的流行了10年之久的虛擬DOM方案，并且在性能表現(xiàn)上更是達到了登峰造極的地步！
下面大家跟隨村長一起來一睹究竟！
不同策略對性能的影響
上面說Svelte和Solid通過放棄虛擬DOM達到了接近原生DOM的優(yōu)秀性能表現(xiàn)，尤其Solid輕松超過vue3，遠超react。連尤大都感慨：Solid性能真是NB!
我們一起來看一下性能統(tǒng)計圖，這是我9月21日重新生成的：
不是說虛擬DOM會帶來性能提升嗎？這個確實是面試題八股文的答案，但是其實尤大早就在知乎上回答過這個問題，大家可以去看原文：
網(wǎng)上都說操作真實 DOM 慢，但測試結(jié)果卻比 React 更快，為什么？
那也就是說，利用編譯或轉(zhuǎn)譯能力，Svelte和Solid最終都生成了直接操作DOM的更新函數(shù)，雖說兩者實現(xiàn)細節(jié)不甚相同，但是最終都做到了魚和熊掌兼得的效果，即提升開發(fā)效率，又保證性能表現(xiàn)。
針對這一點，尤大又祭出新活，就是所謂的Vapor模式，也就是說用戶未來在使用Vue3時可以指定某個組件使用DOM方式編譯結(jié)果，從而提升性能表現(xiàn)。關(guān)于這點，我覺得尤大純屬被帶節(jié)奏，增加了使用復(fù)雜性不說，大部分場景下收益并不明顯，兩個新銳在這里飆車，那是想標(biāo)新立異，吸引用戶注意力，現(xiàn)代Web開發(fā)中的瓶頸從來都不是性能而是開發(fā)效率和可維護性。
所以雖說數(shù)據(jù)上看起來不錯，但我并不認(rèn)為這是什么很大的亮點，因此咱們排名依然不變！
老鳥榜：Vue3 = React > Svelte3 > Solid
老鳥：不要跟我說什么react、angular、vue，老夫?qū)懘a就用jQuery！
菜鳥榜：Vue3 = Svelte3 > Solid > React
菜鳥：woc太NB了，我也不知道該選啥！
不同策略對生成代碼量的影響
最后，我們再探討一下三個框架在最終生成代碼量上的表現(xiàn)。下面圖片來自尤大直播中原圖：
可見，Svelte和Solid由于不需要虛擬DOM相關(guān)的運行時代碼，在起步階段和Vue比有一QQ差距；但在15個組件這個關(guān)鍵節(jié)點之后，我們發(fā)現(xiàn)Svelte打包體積開始快速攀升，而Solid和Vue增長非常平緩，可以說并駕齊驅(qū)。
這里我可以說，如果你特別在意執(zhí)行速度和打包體積，比如一些移動端的h5頁面，那看起來Solid是你的不二之選。
那Svelte呢？考慮到優(yōu)秀的開發(fā)體驗和整體性能，只要不是規(guī)模很大的項目應(yīng)該都能勝任。
這里很抱歉我沒有去打個包給大家看看結(jié)果，那主要是因為我覺得我們業(yè)務(wù)代碼多那么幾k，少那么幾k，在現(xiàn)在這個網(wǎng)絡(luò)條件下根本無足輕重！
總結(jié)
到了激動人心的總結(jié)時刻，在我心中到底這倆框架值得花時間學(xué)習(xí)嗎？
值得！
存在必有道理，Svelte和Solid在國外那么受歡迎不是沒有原因的，能在內(nèi)卷的前端框架市場殺出一條血路，占據(jù)一席之地，相信必有適合它們的應(yīng)用場景和優(yōu)點。
當(dāng)前名稱：后起之秀Svelte和Solid值得花時間學(xué)習(xí)嗎
瀏覽路徑：http://www.5511xx.com/article/cccsjde.html
