【閱讀】1235- 推薦2022前端必看的新書 《Vue.js設(shè)計與實現(xiàn)》

本文浮夸班標題?《廢物！Vue3源碼都不會，還敢去頭條面試前端？》

今天推薦一本我認為2022年前端進階需要看的一本書，來自Vue官方團隊成員霍春陽的新書《Vue.js設(shè)計與實現(xiàn)》

很久之前我跟春陽面基的時候就知道他在寫一本關(guān)于Vue3原理的書，上個月一起吃火鍋知道他寫完了，趕緊厚臉皮要了一本簽名版樣書，還有尊貴的專享標簽，昨天到貨后馬上捧讀了一晚上，今天上午看完后寫了這個全球首發(fā)的測評，為什么是首發(fā)呢？畢竟本書的作者還沒拿到樣書 ?（狗頭）

介紹下Vue這個框架

Vuejs是國內(nèi)最流行的前端框架之一，可以吧一個普通的數(shù)據(jù)封裝為響應(yīng)式數(shù)據(jù)，數(shù)據(jù)修改之后就會自動通知到頁面更新，開發(fā)者只需要關(guān)注數(shù)據(jù)，對新手非常友好，除了響應(yīng)式系統(tǒng)，還有組件化，虛擬Dom，單文件組件，配套全家桶等功能讓Vue也能輕松應(yīng)對復(fù)雜項目，也成為了各大中小公司前端技術(shù)選型的首選，最近Vue剛把默認版本改成了Vue3，對Vue2進行了全面的升級，下面這張圖可以看到Vue3的新特性 ，全部使用Typescript重構(gòu)，全新的響應(yīng)式和虛擬dom系統(tǒng)，Composition api以及自定義渲染器等功能，我相信Vue3也會在2022年逐漸普及開來，繼續(xù)和React在國內(nèi)的前端生態(tài)中獨領(lǐng)風(fēng)騷

再說下本書的特點

這本書并不是Vue3的入門教程，而是從整體上介紹Vue3的設(shè)計思想和原理解讀，解讀源碼的同時，而是能夠你在更高的視野和維度去理解這個框架，現(xiàn)在Vue3已經(jīng)成為了vue的默認版本，2022年Vue3也會越來越普及，面試也會出現(xiàn)越來越多Vue3相關(guān)的面試題 ?這本書絕對應(yīng)該放在前端工程師的2022年必讀書里 之前有一本vue2源碼解讀的書《深入淺出Vue.js》，現(xiàn)在可以直接看這本Vue3的源碼書了

本書一共六章，一共18篇，501頁 全是Vue3原理和設(shè)計理念的硬貨

第一篇三篇主要介紹框架的設(shè)計理念，首先介紹前端框架中關(guān)于命令式，聲明式，虛擬dom，運行時和編譯時的權(quán)衡理念，然后介紹了前端框架設(shè)計需要考慮的因素，比如體積，開發(fā)體驗，特性開關(guān)，錯誤處理等，最后介紹Vue.js在這些理念中做了哪些設(shè)計和權(quán)衡 看完第一章，和面試官談笑風(fēng)生問題不大，但是如果被問到了細節(jié)，就需要后面的章節(jié)強化，下圖是Vue最核心模塊的依賴關(guān)系

第二章三篇響應(yīng)式系統(tǒng)，Vue中最大的特色之一就是響應(yīng)式系統(tǒng)，簡直就是各大面試官的萬年面試題，社區(qū)里關(guān)于響應(yīng)式原理的解讀文章也是一抓一大片，霍春陽作為Vue3貢獻度第二的維護者，給出了更加詳細的解讀，首先響應(yīng)式系統(tǒng)里除了Proxy代理數(shù)據(jù)的主流程外，如何做代理的清理，effect函數(shù)的嵌套，computed和watch的實現(xiàn)，以及過期副作用的競態(tài)問題，并且還分析了Javascript規(guī)范文件中關(guān)于Proxy的細節(jié)分析，通過規(guī)范的定義來介紹如何代理obj，set，map等數(shù)據(jù)結(jié)構(gòu)，這個細致程度絕對值得你收藏，最后介紹了下原始值的代理函數(shù)ref的實現(xiàn)細節(jié)，雖然我看過好幾遍Vue的源碼了，這篇響應(yīng)式的剖析還是讓我有所收獲

第三章五篇渲染器講的就是vue如何基于響應(yīng)式系統(tǒng)，把節(jié)點渲染到瀏覽器之上，包括節(jié)點的掛載和更新，節(jié)點事件，class等屬性的更新，虛擬Dom的更新邏輯，詳細的介紹了雙端的diff算法，其中大家最感興趣的最長遞增子序列也有詳細的圖解分析，其中簡單diff是React fiber之前的算法，雙端diff是vue2使用的算法，快速diff是現(xiàn)在Vue3使用的算法，這樣我們也完全了解了虛擬Dom這個技術(shù)在Vue和React的發(fā)展

第四章三篇組件化，無論是vue還是react，組件化機制都讓我們可以像搭積木一樣去開發(fā)網(wǎng)頁，組件設(shè)計最重要的就是外部傳遞的屬性，組件對外暴露的事件，以及內(nèi)部的擴展，這一章講解了Vue中組件如何渲染，更新，還有生命周期等執(zhí)行邏輯，并且擴展了異步組件和函數(shù)組件的實現(xiàn)原理，并且介紹了內(nèi)建組件keep-alive, teleport 和transition的原理

三四兩章結(jié)合在一起，就是Vue3的在瀏覽器里運行的全部邏輯了

然后就是第五章三篇編譯器，包括編譯器和解釋器的入門，包括狀態(tài)機，AST等概念的科普，詳細的剖析了vue中template是如何變成render function的過程，也是對計算機專業(yè)課編譯原理的回顧，最后講解了Vue中到底做了哪些編譯時期的優(yōu)化，如何通過位運算對虛擬dom進行靜態(tài)標記，從而盡可能提高Vue運行時的性能，還有block tree，緩存函數(shù)等優(yōu)化方式，對我們平時做項目優(yōu)化也提供了很好的思路

第六章一篇服務(wù)端渲染 最后一章主要介紹Vue在服務(wù)器端渲染的一些api和工作方式，如果你正在研究Vue的服務(wù)端渲染，這一節(jié)會對你有幫助，主要就是如何在node環(huán)境下把組件生成為字符串去渲染首屏，并且在客戶端能夠激活，可以作為對ssr感興趣的同學(xué)專門閱讀

作者介紹

然后介紹下作者把，Vue官方團隊的霍春陽，從Vue3的contributor上來看僅次于尤雨溪，可以說是最適合寫Vue3設(shè)計理念書籍的人之一，他本人的經(jīng)歷也非常的勵志，普通本科（退學(xué)）非科班轉(zhuǎn)行做前端，憑著高中學(xué)歷進入過字節(jié)，然后離職全職做了一段時間開源，負責(zé)維護Vue3框架，是我非常佩服的程序員之一，他的成長經(jīng)歷也激勵著很多前端，，下周我約了這本書的作者霍春陽錄一個采訪視頻，可能還有簽名書贈送，大家有什么想問的，歡迎在留言

最后總結(jié)一下 本書雖好，但是如果你期望只通過讀書就能成為源碼高手是不可能的事，你需要老老實實的把vue3的源碼下載下來，分模塊依次去看，并且在和React Angular對比，去逐步學(xué)習(xí)框架設(shè)計的理念，而且任何書籍本身都是作者的觀點表述，我們研究源碼的過程中也要敢于質(zhì)疑和提問，并且在調(diào)試源碼的過程中求證逐步消化 而且本書主要是講原理，所以大家有些場景下需要配合leetcode刷題來看效率更高，比如146題lru緩存幫我們理解keep-alive緩存的設(shè)計，136題只出現(xiàn)依次的數(shù)組幫助我們理解Vue編譯優(yōu)化的位運算，300題最長遞增子序列幫助我們理解虛擬dom的diff算法，最后大家可以私聊我獲取這張Vue3原理全景圖

祝大家都能看懂源碼，2022年和面試官談笑風(fēng)生，對了 我們下期再見