建站
咨詢
售后
建站咨詢
新聞中心
流行趨勢(shì)
不知大家發(fā)現(xiàn)沒有，自從2021年以來，無虛擬DOM框架/庫/編譯器獲得了極大的矚目，最為典型的兩個(gè)項(xiàng)目：
- Svelte
- Solid.js
我們來看看他倆究竟有多勇：
(來自https://www.tecla.io/blog/top-js-frameworks)
可以看到Svelte去年一年在GitHub上增長(zhǎng)的Star接近Vue，甚至力壓老牌經(jīng)典框架Angular！
再來看看這個(gè)：
滿意度甚至超越React和Vue，(吐槽：Angular這滿意度趨勢(shì)…)
感興趣程度同樣霸榜，只不過這回剛好反過來：Svelte力壓Solid，Vue力壓React(越來越多的人對(duì)Vue感興趣了哈)。Angular頹勢(shì)已顯，氣數(shù)已盡了？別擔(dān)心！下一個(gè)選項(xiàng)(Usage)讓Angular來告訴你，什么叫你大爺永遠(yuǎn)是你大爺：
奇怪，感覺自己身邊明明沒那么多人用Angular，怎么肥四？這是因?yàn)檎{(diào)查對(duì)象主要以歐美地區(qū)為主(尤其美國(guó))：
母語為英語的人占多數(shù)：
年輕人為主：
這就很完美的解釋了為什么Solid和Svelte的受歡迎程度會(huì)那么高，年輕啊！折騰??！你要是五六十歲了(在中國(guó)應(yīng)該沒有這個(gè)歲數(shù)的程序員了吧)你也不愿意折騰那些亂七八糟的。
年輕不代表是新手，還是有相當(dāng)一部分有經(jīng)驗(yàn)的開發(fā)者參與調(diào)查的。
數(shù)據(jù)來源：https://2021.stateofjs.com/en-US/libraries/front-end-frameworks/
不過這些數(shù)據(jù)還不能證明Svelte和Solid已經(jīng)成為流行框架\庫\編譯器了，有相當(dāng)一部分叫好不叫座的，我們來看看npm的數(shù)據(jù)：
哎呀！暴露了暴露了，再來看看Google搜索量：
可以看到三大框架依然是主流哈，而且Vue和Angular的差距已經(jīng)越來越小了，當(dāng)然還因?yàn)橛泄缮衩氐臇|方力量屏蔽掉了大部分去Google搜索Vue的，不然我相信Vue的數(shù)據(jù)一定可以超越Angular的。
數(shù)據(jù)源自https://trends.google.com/trends/explore?cat=31&date=today%205-y&q=React%20javascript,Vue%20javascript,Angular%20javascript,Solid.js%20javascript,Svelte%20javascript
沒想到對(duì)Svelte最感興趣的居然是韓國(guó)人！雖然三大框架YYDS，但作為后起之秀并且在沒有明顯優(yōu)勢(shì)的情況下(綜合情況，光寫個(gè)Hello World確實(shí)誰也比不過Svelte)依然能夠從三大框架嘴里分一杯小小的羹，并且還能夠獲得如此巨大的關(guān)注度，那就證明無虛擬DOM的趨勢(shì)已經(jīng)悄然興起了。
為什么這玩意會(huì)成為一種趨勢(shì)呢？有啥好處？好處就是性能！
什么？虛擬 DOM 不就是為了提升性能的嗎？！是也不是，推薦讀一下這篇：
[0]《網(wǎng)上都說操作真實(shí) DOM 慢，但測(cè)試結(jié)果卻比 React 更快，為什么？》
他們會(huì)火不是沒有原因的，我們來看看他倆的性能：
可以用傲視群雄這四個(gè)字來形容了，Vue之前一直以高性能為傲，但被人超了怎么可能會(huì)甘心？畢竟Vue和React不一樣，當(dāng)數(shù)據(jù)更新時(shí)Vue是知道該更新哪個(gè)組件的，React不知道所以它只能用diff算法，沒有虛擬DOM根本不行。那Vue干嘛也要來一個(gè)虛擬DOM呢？尤雨溪也是這么想的！
其實(shí)他早就有過放棄虛擬DOM的想法了：在尤雨溪發(fā)表的《Vue3的設(shè)計(jì)過程》(翻譯版)一文中，尤大說：一種選擇是放棄虛擬 DOM 并直接生成命令式 DOM 操作，但這將消除直接編寫虛擬 DOM 渲染功能的能力，我們發(fā)現(xiàn)這對(duì)高級(jí)用戶和庫作者非常有價(jià)值。
那時(shí)候Vue3還沒發(fā)布呢，Vue3的createRenderer就是利用虛擬DOM來實(shí)現(xiàn)跨平臺(tái)的，但成天老是跨平臺(tái)跨平臺(tái)的，我們平時(shí)開發(fā)業(yè)務(wù)又有多少跨平臺(tái)項(xiàng)目呢？
現(xiàn)在追求的就是一個(gè)輕量級(jí)，沒有了虛擬DOM就沒有了Diff算法，不僅可以不用運(yùn)行一些無謂的計(jì)算，而且打包出來的體積那可真是輕上加輕啊！它不香嗎？
但也不能完全放棄虛擬DOM啊，一方面虛擬DOM還是有它大展宏圖的場(chǎng)景的。另一方面你直接把虛擬DOM刪了，那些庫怎么辦？它們有多少是依賴虛擬DOM的API的呢？有多少組件庫用的是jsx呢：
[1]《為什么 Vue3 的組件庫都在使用 jsx/tsx？》
去掉了虛擬DOM的話，那些組件庫是不是就用不了了呢？那咱們可以搞個(gè)模式出來嘛！
無虛擬DOM模式
首先咱們先把尤大在發(fā)布會(huì)上說的話(重點(diǎn)部分)翻譯下，為了節(jié)省篇幅不重點(diǎn)的地方就不貼上來了：
主要的事情就是：我們想要探索一種新的編譯策略
我們都知道Vue是一個(gè)基于模板的框架，即使你能用jsx能用虛擬DOM，但大多數(shù)用戶還是會(huì)用template模板。
(挨個(gè)截圖太麻煩了我就不截了，還浪費(fèi)篇幅，我就直接寫翻譯了，感興趣的話可以點(diǎn)進(jìn)去視頻鏈接[2]看)
由于Vue的大部分用戶都用單文件組件來寫代碼，所以我們其實(shí)是有機(jī)會(huì)把組件編譯成原生JS、CSS的。所以編譯的這個(gè)步驟是有機(jī)會(huì)能讓Vue變成一個(gè)超級(jí)編譯器的！這將會(huì)很有趣，所以我們想要探索一下新的編譯策略，這也是受到了Solid.js的啟發(fā)。新的編譯策略可以把template模板編譯成命令式的DOM操作+響應(yīng)式的setup綁定以代替虛擬DOM和render函數(shù)。所以想象一下，當(dāng)我們寫了一個(gè)這樣的組件：
(此處省略一些廢話：這是script setup語法、看這里有個(gè)button按鈕、我們給按鈕綁定一個(gè)響應(yīng)式的值之類的話)
我們生成的將會(huì)是這樣的代碼，生成出來的代碼量非常少，目前的想法是我們過一遍虛擬DOM樹然后生成真實(shí)DOM的操作。我們會(huì)在編譯期分析template模板里的HTML的結(jié)構(gòu)并將其字符串化：
為了能讓打包出來的內(nèi)容最小化，去掉了結(jié)束標(biāo)簽以及各種綁定的屬性。然后再生成一個(gè)cloneNode：
通過分析得出哪些屬性是響應(yīng)式的，把它們都放在effect里，再綁定事件，全部都是非常好理解的DOM操作：
(這不比Svelte生成出來的那一大坨好多了？)
兩種模式
這里的兩種模式指的并不是虛擬DOM模式和無虛擬DOM模式這兩種模式，而是無虛擬DOM模式下還可以繼續(xù)再往下細(xì)分出來兩種模式：
組件模式
比方說你現(xiàn)在手里已經(jīng)有了長(zhǎng)期維護(hù)的Vue3項(xiàng)目，你要是直接換成無虛擬DOM模式那肯定是要出問題的，所以可以采用組件模式來精確控制哪些組件不需要虛擬DOM。
比方說你的項(xiàng)目中采用了尤大推薦的naive-ui這個(gè)組件庫，我們打開一個(gè)比較常用的組件Button來看一下：
tsx結(jié)尾，那虛擬DOM算是沒跑了。不過tsx也照樣可以給改成生成真實(shí)DOM的函數(shù)啊，solid.js不就是這么干的嗎？其實(shí)理論上來說確實(shí)是可以做到的，我們點(diǎn)進(jìn)去再看一眼：
這里用到了h函數(shù)，這個(gè)函數(shù)是專門用來生成虛擬DOM的，假如你把項(xiàng)目全部換成了無虛擬DOM模式同時(shí)這些庫還沒來得及跟進(jìn)的話，那肯定是不行的。
所以你可以控制，你哪個(gè)組件里沒用這個(gè)組件庫，你再給這個(gè)組件單獨(dú)的一個(gè)編譯策略(無虛擬DOM模式)。
既然有組件級(jí)的那就肯定有應(yīng)用級(jí)的，比方說你想開發(fā)一個(gè)UI高度定制化的H5活動(dòng)頁。
一般來說這樣的頁面不會(huì)用組件庫，都是自己寫樣式。另一方面這種活動(dòng)頁當(dāng)然是越小越好，越快越好啦！那么此時(shí)你就可以采用全局無虛擬DOM模式。
怎么感覺這是在搶Svelte飯碗呢？我看技術(shù)論壇已經(jīng)有人分享了自己用Svelte來開發(fā)一些小頁面的文章了，這回再有什么性能跑分之類的評(píng)測(cè)Vue應(yīng)該不會(huì)再輸給Svelte了(看情況，組件越少Svelte越占優(yōu)，反之則Vue占優(yōu))
機(jī)遇與挑戰(zhàn)
最近前端可謂是越來越卷了，你要是去面試稍微高級(jí)點(diǎn)的崗位的話，估計(jì)很可能會(huì)問你Vue怎么編譯的兩種模式了(即使你并不感興趣)。
但我發(fā)現(xiàn)很多人對(duì)自己做一款組件庫非常感興趣，從文章列表里看一下究竟有多少組件庫相關(guān)的文章就能夠一探究竟了。而且很多教大家搭建組件庫的文章也是點(diǎn)贊量非常高，還有很多文章推薦自己做出來的組件庫。
只可惜大部分個(gè)人做的組件庫都是孤芳自賞，沒幾個(gè)人用。一方面的個(gè)人開發(fā)者可能隨時(shí)刪庫跑路，不穩(wěn)定。誰知道你寫的那玩意有多少bug呢？另一方面大家也更愿意用Star非常多的組件庫，證明其穩(wěn)定。
所以大家如果想從主流組件庫那里分一杯羹的話還是非常困難的。那現(xiàn)在這個(gè)無虛擬DOM模式是不是就是一個(gè)千載難逢的大好時(shí)機(jī)？不過我個(gè)人依然感覺希望不大，因?yàn)槟切┲髁鹘M件庫肯定會(huì)立馬跟進(jìn)，搞一款無虛擬DOM適配版。
不過不管怎么說，我對(duì)這個(gè)實(shí)驗(yàn)性特性還是非常期待的。因?yàn)檫@個(gè)編譯策略編譯成web components很可能會(huì)是一個(gè)非常不錯(cuò)的選擇，總之，期待無虛擬DOM的到來！
文章鏈接：
[0]: https://www.zhihu.com/question/31809713/answer/53544875
[1]: https://www.zhihu.com/question/436260027/answer/1647182157
[2]: https://www.bilibili.com/video/BV12S4y1e7pn?p=1&share_medium=android&share_plat=android&share_session_id=4e2c7597-7fa7-4e0a-a098-5e0aa675b035&share_source=WEIXIN&share_tag=s_i×tamp=1655041421&unique_k=nLvKgzv&vd_source=3490d817b36fc42ec9a252b6cd0d6baf
網(wǎng)站標(biāo)題：Vue無虛擬DOM模式即將到來
網(wǎng)址分享：http://m.fisionsoft.com.cn/article/ccshogo.html
