這本vue3編譯原理開源電子書，初中級前端竟然都能看懂

前端欧阳發表於2024-07-31

Vue編譯原理前端

前言

眾所周知vue提供了很多黑魔法，比如單檔案元件(SFC)、指令、宏函式、css scoped等。這些都是vue提供的開箱即用的功能，大家平時用這些黑魔法的時候有沒有疑惑過一些疑問呢。

我們每天寫的vue程式碼一般都是寫在*.vue檔案中，但是瀏覽器卻只認識html、css、js等檔案型別，明顯是不認識*.vue檔案的，我們寫的*.vue檔案是如何在瀏覽器中執行的呢？
vue提供了很多指令，比如大家常用的v-model語法糖指令，那你知道這個所謂的語法糖指令到底是什麼東西嗎？
文件上說了宏函式不需要import匯入，那執行的時候函式都沒地方定義不就報錯了嗎？
還有css scoped是如何實現樣式隔離的呢？

說到這裡不得不推薦一本開源電子書：vue3編譯原理揭秘。上面這些問題的答案全部都在這本電子書中，更加難能可貴的是這本書通熟易懂到初中級前端都能看懂。這本書的核心思想是透過debug的方式帶你搞清楚vue3中的編譯黑魔法。

電子書地址： https://vue-compiler.iamouyang.cn/

book

收費嗎？

首先回答這個大家最關注的問題，這本vue3編譯原理揭秘開源電子書收費嗎？

既然都開源了，當然是免費的，只求你的一個star。GitHub地址： https://github.com/iamouyang21/vue3-compiler 。

並且還有一個配套的vue原始碼群，群也是不收費的。

看完這本書我能學到什麼

vue因為學習曲線平緩，有其他框架使用經驗的同學，基本花上半天時間，看一下文件就可以直接上手。

之所以這麼好上手是因為vue提供了很多黑魔法，比如單檔案元件(SFC)、指令、宏函式、css scoped等。我們只需要按照官方文件的要求來寫就可以輕鬆上手一個vue專案。

也正是因為vue內部封裝了太多API，導致很多同學的技術水平一直停留在只會使用API上，也就是常說的“知其然而不知其所以然”。有時遇見一些特別複雜的需求時，以當前的技術水平，想要去實現這些需求就非常困難了。

這本書可以打破你當前的困境：技術水平一直停留在只會使用API上。看完這本書可以讓你對vue編譯的認知有質的提升，並且由於本書非常詳細。詳細到debug原始碼的每一個步驟都寫出來了，你完全可以按照本書的步驟自己去debug讀原始碼。所以這本書不光是教你vue編譯原理的知識，更多的是教會你如何自己去透過debug的方式讀懂原始碼。

這就完了？

不，看完本書你還可以在面試的時候去裝X。

如果你是候選人，當其他候選人還在和麵試官聊爛大街的vue響應式原理時，你上來就和其他人不一樣，直接聊看著很神秘的vue編譯原理，這無疑在面試中可以加不少分的。

如果你是面試官，有時會遇見一些精通vue的候選者。這些候選者有的是“真精通”，有的卻是看了一些常見的vue原始碼文章的“假精通”。這時你就可以用vue編譯原理的問題試探出候選者的真實水平。

50k